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

这将围绕中心点

绘制卫星圆圈

关键是将计算出的极坐标（角度，半径）坐标转换为笛卡儿（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>

Answer 2

这将绘制同心圆：

<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;

}

/*  ===============================
    Loop to Draw concentric circles
    =============================== */

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

//  More settings you can change
var starting_radius = 50
var number_of_circles = 7
var gap_between_circles = 3

//  The radius increments for each circle drawn
for(var n=number_of_circles; n>0; n--){
    var radius =    starting_radius + n * gap_between_circles
    document.getElementById('my_svg').appendChild( drawCircle(cx,cy,radius) )
}

</script>

SVG：一圈圈子

2 个答案:

这将围绕中心点

这将绘制同心圆：