svg创建圈子

我对svg很陌生，不知道它的结构。我想在随机职位上创建10个圈子。如何在循环内部为（）循环做这个工作？svg创建圈子

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

来源

2012-04-01 Ecrin

您的svg嵌入在某种HTML文档中吗？你能够使用外部脚本吗？您可能想要为您的问题添加更多细节。 – Jlange 2012-04-01 20:24:07

我的文档是SVG，并且一些HTML代码被嵌入到SVG中。我也只能使用Javascript（没有JQuery）。我可以使用循环的HTML吗？ – Ecrin 2012-04-01 20:28:23

请参阅http://phrogz.net/svg/svg_in_xhtml5.xhtml以了解如何创建程序化SVG元素并将其添加到DOM。 – Phrogz 2012-04-02 14:42:10

尝试使用以下：

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

然后设置的属性后，（CX，CY，可以随机地通过功能生成的R），可以插入新创建的节点到svg文档中：

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

您可以将此函数放入al并根据需要生成尽可能多的圈子。你甚至可以随机化颜色！

来源

2012-04-01 20:41:17 Jlange

我明白了逻辑谢谢你。但我不知道如何在声明特性后将新节点插入到svg中。我是否需要创建另一个方法来插入svg？ – Ecrin 2012-04-01 20:54:54

@Ecrin您的评论已经回复。见上面的'appendChild'。 – Phrogz 2012-04-02 14:41:08

后来我明白了。谢谢 – Ecrin 2012-04-02 15:23:01

svg创建圈子

回答

相关问题