javascript - 使用 动态创建时，SVG 不起作用

Question

虽然我发现了这个问题的变体，但我还没有找到解决我的问题的方法。为了简洁起见，我有以下结构......

<svg>
   <g>
     <rect></rect>
     <rect></rect>
     <rect></rect>
   </g>
</svg>

我可以通过在组内的矩形元素下方添加 use 元素来对这些矩形元素进行动画处理。但是，如果我尝试动态创建一个具有动画规则的 use 元素以插入到 rect 元素之后和组内，则动画不会发生。

在 Chrome 开发工具中查看时，我可以看到动态创建的元素在那里，但动画没有发生。

我已经在 FF 和 Chrome 中进行了测试，但都不起作用。

我读到这可能是一个 Chrome 错误，但我读到的大多数线程都较旧，并且不确定是否已找到解决方案。

当我创建元素时，我使用 createElementNS。我尝试添加 FakeSmile 库，尽管这似乎是 IE 特定的。

我只使用 JavaScript，没有使用 jQuery。

如果我没有说清楚，这是期望的结果:http://codepen.io/JoeyCinAZ/pen/Hstkr这是不起作用的示例: http://codepen.io/JoeyCinAZ/pen/GHhbw

Answer 1

您正在创建<use>当您需要使用 createElementNS 在 SVG 命名空间中创建元素时，请使用 createElement 。

此外，当您必须使用 setAttributeNS 在 xlink 命名空间中设置 xlink 属性时，您还尝试使用 setAttribute 设置它。