svgサークルを作成

私はsvgを初めて使っていて、その構造を知っていません。ランダムな位置に10個の円を作成したいのですが、forループのようにループ内でこれを行うことはできますか？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

私のドキュメントはSVGで、一部のHTMLコードはSVGに埋め込まれています。また、Javascript（JQueryは使用できません）を使用できます。ループにHTMLを使用することはできますか？ – Ecrin

SVG要素を手順を追って作成してDOMに追加する例については、http：//phrogz.net/svg/svg_in_xhtml5.xhtmlを参照してください。 – Phrogz

次を使用してみてください：

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

@Ecrinあなたのコメントは、すでに回答がありました。上の 'appendChild'を参照してください。 – Phrogz

後で私はそれを得た。ありがとう – Ecrin

答えて

関連する問題