SVG <动画>使用 &lt;use&gt; 动态创建时不起作用 [英] SVG &lt;animate&gt; not working when created dynamically using &lt;use&gt;

问题描述

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

While I have found variations of this question I have not found a solution for my problem. For the sake of brevity I have the following structure...

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

我可以通过在组内的 rect 元素下方添加一个 use 元素来为这些 rect 元素设置动画.但是，如果我尝试动态创建带有动画规则的 use 元素以在 rect 元素之后和组内插入，则动画不会发生.

I can animate these rect elements by adding a use element beneath the rect elements within the group. However, if I try to dynamically create a use element with animation rules to insert after the rect elements and inside the group, the animation does not take place.

在 Chrome Dev Tools 中查看时，我可以看到动态创建的元素在那里，但动画没有发生.

When reviewing in Chrome Dev Tools, I can see that the dynamically created elements are there, but the animation is not taking place.

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

I have tested in FF and Chrome, and neither work.

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

I have read that this may be a Chrome bug, but most of the threads that I read were older, and am not sure if a solution has been found yet.

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

When I am creating my elements I am using createElementNS. I have tried adding the FakeSmile library even though this seems to be IE specific.

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

I am only using JavaScript, no jQuery.

如果我没有说清楚，这里是想要的结果:http://codepen.io/JoeyCinAZ/pen/Hstkr这是一个不起作用的例子:http://codepen.io/JoeyCinAZ/pen/GHhbw

If I am not making myself clear, here is the desired result: http://codepen.io/JoeyCinAZ/pen/Hstkr and here is the non-functioning example: http://codepen.io/JoeyCinAZ/pen/GHhbw

推荐答案

当您需要使用 createElementNS 在 SVG 命名空间中创建元素时，您正在使用 createElement 创建 元素.

You are creating the <use> element with createElement when you need to use createElementNS to create the element in the SVG namespace.

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

Also you're trying to set the xlink attribute using setAttribute when you must use setAttributeNS to set it in the xlink namespace.

这篇关于SVG <动画>使用 &lt;use&gt; 动态创建时不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！