使用<animate>动态创建SVG <animate>时不能工作

Question

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

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

我可以通过在组内的rect元素下面添加一个use元素来动画这些rect元素。但是，如果我尝试动态创建带有动画规则的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

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

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