SVG <animate>动态创建时无法正常工作<use>

虽然我发现这个问题的变化，但我还没找到解决我的问题的方法。为了简洁我有以下结构的缘故...SVG <animate>动态创建时无法正常工作<use>

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

我可以通过加入该组内的RECT元件下方的使用元件动画这些矩形元件。但是，如果我尝试动态创建一个使用动画规则的插入元素并插入到组中的动画规则，动画不会发生。

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

我已经在FF和Chrome上测试过了，都没有工作。

我读过这可能是一个Chrome的错误，但我读的大部分线程都比较老，并且不确定是否找到了解决方案。

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

我只使用JavaScript，没有jQuery。

如果我不说明白了，这里是理想的结果：http://codepen.io/JoeyCinAZ/pen/Hstkr 这里是无功能例如：http://codepen.io/JoeyCinAZ/pen/GHhbw

2014-10-06 theFish

要创建一个使用的createElement的<use>元素时，你需要使用createElementNS创建SVG命名空间中的元素。

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

2014-10-06 19:14:46

非常感谢你@RobertLongson。我一直在看这个代码，我不能相信我错过了这个。这个答案有2个热情的大拇指。 – theFish 2014-10-06 19:22:02

哦，但现在动画只能使用一次。即使我在动画完成后删除元素。有没有解决方案？ – theFish 2014-10-06 21:17:18

我确定有，但那是另一个问题。 – 2014-10-06 21:18:42

回答