如果动态创建，则无法让 SVG“使用”工作

Question

SVG 有一个很棒的 symbol / use 系统，可以在其中定义例如图标只有一个，然后使用 use 将它们放在 SVG 周围。只是我没有让它在 JavaScript 中工作。

看到这个fiddle。

以编程方式创建的use 节点在浏览器的 DOM 中变得可见，并且与静态创建的节点相同。但只有静态的可见。

你能解释一下发生了什么吗？

---

symbol 与defs 非常相似，但允许在符号旁边定义viewBox，从而使条目的缩放更容易并使代码更简洁。我可以与 defs 合作，但我在那里也遇到了类似的问题。

注意：我的 JavaScript 在 HTML 端，而不是在 SVG 中。我想这样。

Answer 1

我认为您的小提琴中有错字（xref vs href）：

use.setAttributeNS( xlinkns, "xlink:xref","#tri");

而不是

use.setAttributeNS( xlinkns, "xlink:href","#tri");