虽然我发现了这个问题的变体,但我还没有找到解决我的问题的方法。 为了简洁起见,我有以下结构......
<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
最佳答案
您正在创建<use>
当您需要使用 createElementNS 在 SVG 命名空间中创建元素时,请使用 createElement 。
此外,当您必须使用 setAttributeNS 在 xlink 命名空间中设置 xlink 属性时,您还尝试使用 setAttribute 设置它。
关于javascript - 使用 <use> 动态创建时,SVG <animate> 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26222926/