ロードされたsvgファイルに要素を動的に追加する

InkScapeからsvgファイルを読み込んだ後、プログラムコントロールで作成した新しい要素を図面に追加したいとします。これは既に存在する要素の属性を変更するだけでうまくいくと思われますが、DOMを検査するときに表示されていても新規に作成された要素は表示されません！ロードされたsvgファイルに要素を動的に追加する

手簡素化SVGテストファイル：

<svg id="svg8" width="1e3" height="750" version="1.1" 
viewBox="0 0 264.58333 198.43751" xmlns="http://www.w3.org/2000/svg"> 

    <g id="layer"><circle id="cc0" cx="20" cy="20" r="10"/></g> 

</svg>

ジャバスクリプト/ htmlファイル：

<!doctype html><html><head><meta charset="UTF-8"/> 

<script> 
    function addCircle() { 
     var svgDoc = document.getElementById("test"); 
     var svg = svgDoc.contentDocument; 
     var svgns = svgDoc.namespaceURI; 

     // Ok, this changes the circle to red 
     var c0 = svg.getElementById("cc0"); 
     c0.setAttribute("fill", "#ff0000"); 

     var layer = svg.getElementById("layer"); 

     // Create a circle inside layer "g" 
     var cc = document.createElementNS(svgns, "circle"); 
     cc.setAttribute("cx", "50"); 
     cc.setAttribute("cy", "50"); 
     cc.setAttribute("r", "20"); 

     layer.appendChild(cc); 
     // However it's not updating the screen 
     // even if DOM shows the circle is there, inside the "g" 
    } 
</script></head> 

<body> 
<object id="test" data="test.svg" type="image/svg+xml"></object> 
<script>  
    document.onreadystatechange = function(){ 
     if(document.readyState === 'complete') addCircle(); } 
</script> 
</body> 
</html>

私が間違っているのか？それとも私は何が欠けていますか？ありがとうございました！

出典

2017-04-20 Francisco

あなたがChromeを使用してローカルファイルから作業しています（すなわち、file：//）？別のブラウザで試すことができますか？ –

Linux/Ubuntu 16.0.4でChrome 57とFirefox 52の両方を試しました。これはローカルファイルではありませんが、ブラウザと同じマシンで動作するApacheサーバによって提供されます。（http://127.0.0.1/X.html） – Francisco

サークルを作成するために渡すsvg名前空間の問題です。あなたが<object>要素のnamespaceURIを得ているこの

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

出典

2017-04-20 07:35:50

それは働いた！ありがとう:) – Francisco

@フランシスコ - 私の魂があなたを助けたら、私の答えを投票してください。 –

私はしました！しかし、私はstackoverflowで初心者なので、私の投票はまだ表示されません。 ... – Francisco

を試してみてください。あなたが必要なもの
は、内文書のにdocumentElementの一つである：a plunkerとして

function addCircle() { 
    // this is the <object> 
    var svgDoc = document.getElementById("test"); 
    var svg = svgDoc.contentDocument; 
    // here get the real svg document 
    var svgns = svg.documentElement.namespaceURI; 
    //...

stacksnippets®は、インナーフレームの変更を許可しないので...

出典

2017-04-20 08:10:11 Kaiido

はい...名前空間;）うまくいきました！ – Francisco

あなたのソリューションはすばらしく機能しますが、あなた自身のコメントについてもっと明示することができます：「stacksnippets®が内部フレームの修正を許可しないために、プランナーとして...」ありがとう。 – Francisco

Stacksnippetsは、私たちが投稿内に作業コードサンプルを持つことを可能にするスタック交換システムです。しかし、彼らはsnadboxed iframeを使用します。これにより、内部フレームを操作できなくなります。だから、私はあなたにplunkrへの外部リンクを与えました。これは、この制限なしに同様のサービスを提供します。 – Kaiido

ロードされたsvgファイルに要素を動的に追加する

答えて

関連する問題