☰

Chrome で動的に追加された SVG コンテンツを再描画するにはどうすればよいでしょうか? 質問する

tag-icon • tag-icon javascript svg
Chrome で動的に追加された SVG コンテンツを再描画するにはどうすればよいでしょうか? 質問する

iFrame に表示される svg に円要素を動的に追加しました。Chrome では新しい要素が表示されず、FF はまだ試していません。呼び出す必要のある再描画/更新のようなものがありますか? 最初の円は実際には svg ドキュメントにあり、残りはスクリプトから取得されます。

<iframe id="svgFrame" src="xmlfile1.svg" width="300" height="300">
<svg xmlns="http://www.w3.org/2000/svg" id="SVG1" width="200" height="200">
   <circle cx="20" cy="20" r="5"/>
   <circle cx="165" cy="80" r="32"/>
   <circle cx="15" cy="38" r="32"/>
   <circle cx="140" cy="39" r="30"/>
   <circle cx="178" cy="32" r="22"/>
   ...etc
   <circle cx="166" cy="130" r="16"/>
</svg>
</iframe>

要素を作成する JavaScript:

function RandomNumber(min, max) {
    var r;
    r = Math.floor(Math.random() * (max - min + 1)) + min;
    return r;
}

var svg = document.getElementById("svgFrame").contentDocument;

for (var i = 0; i < 99; i++) {

    var n = svg.createElement("circle");
    n.setAttribute("cx" , RandomNumber( 0 , 200) );
    n.setAttribute("cy" , RandomNumber(0, 200) );
    n.setAttribute("r"  , RandomNumber(5, 35) );

    svg.documentElement.appendChild(n);
}

ベストアンサー1

基本的に 2 つのソースがある場合に実行している操作を試したことはありません。ただし、コンテンツを動的に追加するときに Chrome で更新/再描画が必要ないことはわかっています。

ここに私のコードがあります。おそらく役に立つでしょう。

xmlns = "http://www.w3.org/2000/svg";
var C = document.createElementNS(xmlns,"circle");
C.setAttributeNS(null, "cx", cx);
C.setAttributeNS(null, "cy", cy);
C.setAttributeNS(null, "r", rad);
document.getElementById("background").appendChild(C);

背景はグループのID（gタグ）です

おすすめ記事