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

【问题标题】：Why doesn't my dynamically created <use> element show?为什么我动态创建的 <use> 元素不显示？
【发布时间】：2017-10-05 20:46:55
【问题描述】：

使用 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，它与“控制”下的 svg 相同。这让我相信“targetsvg”由于某种原因没有重绘，这是正确的吗？有办法强制吗？

过去五个小时我一直在寻找，但找不到类似的东西。我发现最相关的是 SVG <use> in Chrome doesn't work 但这使用了 Angular，而我不是。我认为原因是相同的（“元素中的相对哈希链接无法正确解析。”）。但如果是这种情况，我如何在没有 Angular 的情况下解决这个问题？

谢谢！

[背景：我有一个从 illustrator 生成的巨大 svg 文件。在这个文件中有许多相当复杂的元素（组等），我需要有不同的版本。这些元素将需要出现在最终结果中的多个位置，因此我要么需要它们的多个副本（根据情况显示/隐藏），要么需要我选择和替换的某种“图集”。我的直觉说后者将更易于维护，因为至少有四个地方和七个“版本”（想想“绿色”、“带有符号 x 的绿色”、“带有符号 y 的红色”等）。如果还有其他选择，我欢迎。]

【问题讨论】：

标签： javascript jquery svg

【解决方案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);

解决了我的问题。

【讨论】：

谢谢。已编辑。