Question

我是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"/>

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

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

svg创建圈子

1 个答案: