爲什麼我的動態創建的<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」不會因爲某種原因重新繪製，這是正確的嗎？有沒有辦法強制呢？

我花了最近五個小時搜索，但我找不到任何類似的東西。我發現的最相關的是 SVG <use> in Chrome doesn't work 但是，使用Angular，我不是。我認爲原因是相同的（「元素中的相對哈希鏈接不能正確解析。」）。但是，如果是這樣的話，我如何在沒有Angular的情況下解決這個問題？

謝謝！

[背景：我有一個巨大的svg文件從插畫生成。在這個文件中有一些相當複雜的元素（組et.c.），我需要有不同的版本。這些元素需要出現在最終結果的多個地方，所以我需要擁有它們的多個副本（顯示/隱藏取決於具體情況）或某種「地圖集」，我選擇和替換。由於至少有四個地方和七個「版本」（認爲「綠色」，「綠色帶有符號x」，「帶有符號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); 

解決了我的問題。