使用<use> </use> </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

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

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