Javascript 使用动态添加的元素设置SVG动画

基于代码，我尝试为动态生成的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。

如果以后在Chrome上动态添加，它将不起作用（将与FF一起使用）

看

---

这似乎是chrome的bug。

肯定[仍然]是chrome的bug。运行Chrome 19.0.1084.52

此代码适用于：

此代码仍然不起作用：

---

在viewBox=“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>

---

请参阅：

五年前我仍然存在同样的问题：）（还有svg过滤器）

我使用跟随黑客：

1。例如，我使用SetAttribute设置了所有may属性 ani.setAttribute（“attributeName”、“transform”）

2。我阅读并设置svg根目录innerhtml: $svgRoot.html（$svgRoot.html（））

---

希望它能帮助到别人，或者有人能告诉我一个更好的方法：）

它正在工作，在升级的Chrome v15下&它可以工作-谢谢！是的，这很烦人，因为这意味着你无法触发动画来响应服务器的消息。我尝试在document.ready上创建某种“svg池”，我会使用任何svg动态添加元素。啊，如果svg元素是在document load上创建的，那么以后添加的动画元素就可以了，但是如果SVG元素后来被添加了，那么它不会被添加吗？是的，我已经向webkit社区报告了这个问题，但是不确定他们什么时候会修复它，在那之前，我们需要这个黑客！！这和这个问题有什么关系？