With given width and height of a page element, you need to find the radius and its center point of the largest circle that fits within that page element.
Find the smaller circle of the width and height; divide this by 2 to find the radius:
var circleRadius = Math.min(elementWidth, elementHeight) / 2;
Given the page elements width and height, find the center by dividing both by 2:
var x = elementWidth / 2;
var y = elementHeight / 2;
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Using Math method to fit a circle</title>
<style type="text/css">
#elem
{
width: 500px;
height: 600px;
border: 1px solid #000;
}
</style>
<script type="text/javascript">
//<![CDATA[
function compStyle(elemId,property) {
var elem = document.getElementById(elemId);
var style;
if (window.getComputedStyle)
style=window.getComputedStyle(elem,null).getPropertyValue(property);
else if (elem.currentStyle)
style=elem.currentStyle[property];
return style;
}
window.onload=function() {
var height = parseInt(compStyle("elem","height"));
var width = parseInt(compStyle("elem","width"));
var x = width / 2;
var y = height / 2;
var circleRadius = Math.min(width,height) / 2;
var circ = document.getElementById("circ");
circ.setAttribute("r",circleRadius);
circ.setAttribute("cx",x);
circ.setAttribute("cy",y);
}
//--><!]]>
</script>
</head>
<body>
<div id="elem">
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
<circle id="circ" width="10" height="10" r="10" fill="red" />
</svg>
</div>
</body>
</html>
0 Comment(s)