svg创建圈子

时间:2012-04-01 20:12:26

标签: svg

我是svg的新手并且不知道它的结构。我想在随机位置创建10个圆。如何在循环中执行此操作,如for()循环?

<g id="rotateSquare">
 <circle cx="100" cy="50" r="20" stroke="black"
  stroke-width="2" fill="goldenrod" />
<text x="110" y="52" fill="red">10</text>
<animateTransform
    attributeType="XML"
    attributeName="transform"
    type="rotate"
    from="0,150,150" to="360,150,150"
    begin="0s" dur="1s"
    repeatCount="1"/> 

1 个答案:

答案 0 :(得分:1)

尝试使用以下内容:

   var svgns = "http://www.w3.org/2000/svg"; 
   var new_circle = document.createElementNS(svgns, "circle"); 

然后设置属性后,(cx,cy,r可以通过函数随机生成), 您可以将创建的新节点插入svg文档:

   /*parent elemnt*/.appendChild(new_circle);

您可以将此功能放入循环中,并根据需要生成任意数量的圆圈。你甚至可以随机化颜色!