javascript - 如果动态创建，则无法使 SVG 'use' 工作

Question

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

查看此fiddle .

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

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

<小时/>

symbol 与 defs 非常相似，但允许在符号旁边定义 viewBox，从而使条目的缩放变得更容易并导致更干净的代码。我可以使用 defs，但我也遇到了类似的问题。

注意:我的 JavaScript 位于 HTML 端，而不是在 SVG 中。我希望这样。

Answer 1

我认为你的 fiddle 中有一个拼写错误(xref vs href):

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

而不是

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