Question

我正在尝试创建一个不同颜色的多个圆圈的图案，每次创建稍微旋转，这是我想要实现的一个例子： http://etc.usf.edu/clipart/42900/42923/circle-29_42923.htm

我创建了svg以正确的间距创建圆圈但是我不知道如何使用SVG复制圆圈，这是我目前为止的代码片段：

<title>Multiple Circles</title>

    <svg x="100" >
        <svg height="500" width="500">
          <circle cx="100" cy="100" r="40" stroke="black" stroke-width="3" fill="transparent" /> 
        </svg>
    </svg>

</svg>

Answer 1

我刚刚创建了你在链接中提到的设计。我使用Javascript来实现这一目标。

这里是小提琴，检查一下： - http://jsfiddle.net/aBaFf/

<强>步骤： -

1）首先，我创建了一个“主要圆圈”，我将在其周围创建圆环。

2）我使用'Path'创建Circle。原因是在圆形路径上找到确切的点。

3）我在第2步找到的那些点上开始创建圆圈。

检查以下代码： -

HTML代码： -

<svg id="mainSvg" width="1000" height="600">
        <path id="smallCircle" fill="none" stroke="red"
              d="
              M 200, 200
              m -75, 0
              a 75,75 0 1,0 150,0
              a 75,75 0 1,0 -150,0
              "
              />
         <path id="LargeCircle" fill="none" stroke="green"
              d="
              M 500, 200
              m -150, 0
              a 150,150 0 1,0 300,0
              a 150,150 0 1,0 -300,0
              "
              />
        </svg>

JavaScript代码： -

function path2Array (path) {
                var pointsArray = new Array();
                for (var i = 0; i < path.getTotalLength(); i++) {
                    var point = path.getPointAtLength(i);
                    var cordinatesXY = {
                        x: point.x,
                        y: point.y
                    }
                    pointsArray.push(cordinatesXY);
                }
                return pointsArray;
            };

            var mainSvg=document.getElementById('mainSvg');            


            function createCircleRing(radius,gape,parent){
                var mainCircle=document.getElementById(parent);
                var points=path2Array(mainCircle);
                var counter=0;
                var circle;
                for(var point in points){
                    counter++;
                    if(counter%gape===0){
                        point=points[point];
                        circle=document.createElementNS("http://www.w3.org/2000/svg", "circle");
                        circle.setAttribute("cx", point.x);
                        circle.setAttribute("cy", point.y);
                        circle.setAttribute("r",  radius);
                        circle.setAttribute("fill", "none");
                        circle.setAttribute("stroke", "black");                
                        mainSvg.appendChild(circle);
                    }
                }
            }

            createCircleRing(10,5,'smallCircle');
            createCircleRing(50,10,'LargeCircle');

Answer 2

如果我想快速重现这张照片，我就是这样做的。

<svg height="500" width="500" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g transform="translate(250,250)" stroke="black" stroke-width="3" fill="none">
    <circle r="200" />
    <circle id="c1" cy="130" r="70"/>
    <use xlink:href="#c1" transform="rotate(15)"/>
    <use xlink:href="#c1" transform="rotate(30)"/>
    <use xlink:href="#c1" transform="rotate(45)"/>
    <use xlink:href="#c1" transform="rotate(60)"/>
    <use xlink:href="#c1" transform="rotate(75)"/>
    <use xlink:href="#c1" transform="rotate(90)"/>
    <use xlink:href="#c1" transform="rotate(105)"/>
    <use xlink:href="#c1" transform="rotate(120)"/>
    <use xlink:href="#c1" transform="rotate(135)"/>
    <use xlink:href="#c1" transform="rotate(150)"/>
    <use xlink:href="#c1" transform="rotate(165)"/>
    <use xlink:href="#c1" transform="rotate(180)"/>
    <use xlink:href="#c1" transform="rotate(195)"/>
    <use xlink:href="#c1" transform="rotate(210)"/>
    <use xlink:href="#c1" transform="rotate(225)"/>
    <use xlink:href="#c1" transform="rotate(240)"/>
    <use xlink:href="#c1" transform="rotate(255)"/>
    <use xlink:href="#c1" transform="rotate(270)"/>
    <use xlink:href="#c1" transform="rotate(285)"/>
    <use xlink:href="#c1" transform="rotate(300)"/>
    <use xlink:href="#c1" transform="rotate(315)"/>
    <use xlink:href="#c1" transform="rotate(330)"/>
    <use xlink:href="#c1" transform="rotate(345)"/>
  </g>
</svg>

Fiddle here

在SVG中创建多个随机圆圈

2 个答案: