Question

基于this代码，我正在尝试为动态生成的SVG元素设置动画：

var svgnode = document.createElementNS('http://www.w3.org/2000/svg','svg');
var circle = document.createElementNS('http://www.w3.org/2000/svg','circle');
circle.setAttribute("cx", "10");
circle.setAttribute("cy", "10");
circle.setAttribute("r", "10");
circle.setAttribute("fill", "blue");
var ani = document.createElementNS("http://www.w3.org/2000/svg","animateTransform");
ani.setAttribute("attributeName", "transform");
ani.setAttribute("attributeType", "xml");
ani.setAttribute("type", "translate" );
ani.setAttribute("from", "10");
ani.setAttribute("to", "100");
ani.setAttribute("begin", "0s");
ani.setAttribute("dur", "2s");
ani.setAttribute("fill", "freeze");
circle.appendChild(ani);
svgnode.appendChild(circle);
document.getElementById('mydiv').appendChild(svgnode);

SVG显示正常，但动画不起作用。如果我在纯HTML / SVG中编写等效代码，它就可以了。我正在使用Chrome。

Answer 1

如果稍后在chrome上动态添加（将与FF一起使用），它将无效。

请参阅http://jsfiddle.net/tap0ri/SF5nE/2/

这似乎是铬虫。

Answer 2

绝对[还是] Chrome的错误。运行Chrome 19.0.1084.52

此代码有效： http://jsfiddle.net/t3d28/

此代码仍无效： http://jsfiddle.net/tap0ri/SF5nE/2/

Answer 3

5年前我还有同样的问题:)（和svg-Filter一样）

我使用跟随黑客：

<强> 1。我设置了setAtteribute的所有may属性，例如 ani.setAttribute（＆＃34; attributeName＆＃34;，＆＃34; transform＆＃34;）;

<强> 2。我阅读并设置了我的svg-root innerhtml： $ svgRoot.html（$ svgRoot.html（））;

希望它可以帮助某人，或者有人可以告诉我一个更好的方法：）

Answer 4

对于viewBox =“0 0 0 0”的两个导航器都不起作用。

在这里工作：

<div id="mydiv">
    <svg id="svgNode" version="1.1" width="100%" height="100%" viewBox="0 0 100% 100%" preserveAspectRatio="xMidYMid meet" id="ext-element-180"></svg>
</div>

请参阅：https://jsfiddle.net/oOroBax/xkb89y4h/

SVG动画与动态添加元素

4 个答案: