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

回答

相關問題