SVG: a circle of Circles

SVG: a circle of Circles

本文关键字：of Circles circle SVG      更新时间：2023-09-26

所以简单地解释一下，我有这个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;

}

它

完成了它需要做的工作，但是我现在需要创建一个数量丰富的圆圈，即 7，并定位每个圆圈，使它们看起来像一个圆的轮廓。

所以一个由圆圈组成的圆圈。

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

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

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

这将绘制同心圆：

<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>
相关文章：