javascript - SVG:圆的圆

Question

所以简单地解释一下，我有这样的 SVG 圆形元素:

var circle = function(cx,cy,r) {
var svgCircle = document.createElementNS(NS,"circle");
    svgCircle.setAttributeNS(null,"cx", cx);
    svgCircle.setAttributeNS(null,"cy", cy);
    svgCircle.setAttributeNS(null,"r", r);
return svgCircle;

它完成了它需要做的工作，但是我现在需要创建任意数量的圆 I.E 7，并定位每个圆，使它们看起来像圆的轮廓。

所以一个由圆组成的圆。

我似乎无法理解它是如何工作的。解释或一些指导也会有很长的路要走!

Answer 1

这将围绕中心点绘制卫星圈

关键是将计算出的极( Angular 、半径)坐标转换为笛卡尔 (x,y)。请参阅下面示例中添加的函数 polarToCartesian():

<svg id="my_svg" height="400" width="400"></svg>

<script type="text/javascript">

function drawCircle(cx,cy,r){

    var svgCircle = document.createElementNS('http://www.w3.org/2000/svg',"circle");
        svgCircle.setAttributeNS(null,"cx", cx);
        svgCircle.setAttributeNS(null,"cy", cy);
        svgCircle.setAttributeNS(null,"r", r);
        svgCircle.setAttributeNS(null,"stroke",'blue')
        svgCircle.setAttributeNS(null,"fill",'transparent')
    return svgCircle;

}

function polarToCartesian(center_x, center_y, radius, angle_in_degrees) {
    var return_value = {}
    var angle_in_radians =  angle_in_degrees * Math.PI / 180.0;
        return_value.x =    center_x + radius * Math.cos(angle_in_radians);
        return_value.y =    center_y + radius * Math.sin(angle_in_radians);
    return return_value;
}

/*  ==============================
    Loop to Draw Satellite circles
    ==============================  */

//  The center is the same for all circles
var cx = 200
var cy = 200

var radius_of_satellites_from_center = 100
var radius_of_small_circles = 10
var number_of_satellite_circles = 7

//  The angle increments for each circle drawn
for(var n=0; n<number_of_satellite_circles; n++){

    //  Find how many degrees separate each circle
    var degrees_of_separation = 360/number_of_satellite_circles

    var angle_as_degrees = degrees_of_separation * n

    var coordinates = polarToCartesian(cx, cy, radius_of_satellites_from_center, angle_as_degrees)

    document.getElementById('my_svg').appendChild( drawCircle(coordinates.x,coordinates.y,radius_of_small_circles) )

}

</script>