動的に作成された<use>要素が表示されないのはなぜですか？

Question

JavaScriptとjQueryを使用して、グループ要素を別のグループ要素にリンクする使用要素に置き換えようとしています。私が起こることを期待何

// Javascript 
 
origgroup = $("#origgroup")[0]; 
 
repgroup = $("#referenceGroup1")[0]; 
 
origgroupParent = origgroup.parentNode; 
 

 
use = document.createElementNS("http://www.w3.org/2000/svg", "use"); 
 
use.setAttribute("xlink:href", "#origgroup2"); 
 
use.setAttribute("id", "newuse"); 
 

 
tmp = origgroupParent.replaceChild(use, origgroup); 
 

 
// After this snippet is run, "targetsvg" and "control" are identical. Except that targetsvg's use-tag has an unique ID.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- My "atlas". I want to put <use> elements in "targetsvg" below, linking to these groups. --> 
 
Atlas <br> 
 
<svg id="atlas" width="120" height="70" version="1.1"> 
 
    <g id="referenceGroup1"> 
 
    <rect x="10" y="10" width="90" height="20" fill="green"/> 
 
    <circle cx="20" cy="40" r="15" fill="blue"/> 
 
    </g> 
 
    <g id="referenceGroup2"> 
 
    <rect x="40" y="10" width="90" height="20" fill="red"/> 
 
    <circle cx="50" cy="40" r="15" fill="orange"/> 
 
    </g> 
 
</svg> 
 
<br> Target <br> 
 
<!-- My target --> 
 
<svg id="targetsvg" width="120" height="70" version="1.1" 
 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <g id="origgroup"> 
 
    <rect x="40" y="10" width="90" height="20" fill="red"/> 
 
    <circle cx="50" cy="40" r="15" fill="orange"/> 
 
    </g> 
 
</svg> 
 
<br> 
 
Control 
 
<br> 
 
<!-- This is identical to the javascript modified version of "targetsvg" --> 
 
<svg id="control" width="120" height="70" version="1.1" 
 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <use xlink:href="#referenceGroup1"></use> 
 
</svg>

青い円と「ターゲット」の下の緑の四角が存在することがあります。 "targetsvg"の結果として得られるSVGを調べると、 "Control"の下のsvgと同じです。これは、私が "targetsvg"は何らかの理由で再描画されないと信じていますが、これは正しいですか？それを強制する方法はありますか？

私は過去5時間の検索に費やしましたが、類似のものは見つかりませんでした。私が見つけた最も関連性の高いものは SVG <use> in Chrome doesn't work ですが、私はそうではありません。私は原因が同じだと思う（「要素内の相対ハッシュリンクが正しく解決されないだろう」）。しかし、これが当てはまる場合、Angularなしでこれを解決するにはどうすればよいですか？

ありがとうございます！

[]背景：イラストレーターから生成された膨大なsvgファイルがあります。このファイルには、さまざまなバージョンを持つ必要があるかなり複雑な要素（グループのグループなど）が多数あります。これらの要素は最終結果の複数の場所に表示する必要があります。そのため、複数のコピー（状況に応じて表示/非表示）または選択して置き換える何らかの「アトラス」が必要です。私の腸は、少なくとも4つの場所と7つの "バージョン"（Think "green"、 "green with symbol x"、 "red with symbol y"等）があるので、後者はより保守的であると言います。他のオプションがある場合、私はそれらを歓迎します。]

Answer 1

投稿後、私は名前空間の問題であることに気付きました。 JavaScriptを次のように変更します。

origgroup = $("#origgroup")[0]; 
repgroup = $("#referenceGroup1")[0]; 
origgroupParent = origgroup.parentNode; 

// Namespaces 
var svgns = 'http://www.w3.org/2000/svg', 
xlinkns = 'http://www.w3.org/1999/xlink' 

use = document.createElementNS(svgns, "use"); 
// **setAttributeNS** instead of setAttribute as originally. 
use.setAttributeNS(xlinkns, "xlink:href", "#referenceGroup1"); 
use.setAttribute("id", "newuse"); 

tmp = origgroupParent.replaceChild(use, origgroup); 

解決済み