javascript - 为什么我动态创建的 <use> 元素不显示？

Question

使用 JavaScript 和 jQuery，我试图用链接到另一个组元素的 use 元素替换一个组元素。

// 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 的情况下解决这个问题？

谢谢!

[背景:我有一个由 illustrator 生成的巨大 svg 文件。在这个文件中有许多相当复杂的元素(组组等)，我需要有不同的版本。这些元素将需要出现在最终结果中的多个位置，所以我要么需要它们的多个副本(根据情况显示/隐藏)，要么需要我选择和替换的某种“图集”。我的直觉说后者将更易于维护，因为至少有四个地方和七个“版本”(想想“绿色”、“带有符号 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);

解决了我的问题。