SVG动画与动态添加元素

Question

基于此代码,我试图动画生成动态生成的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/

这似乎是铬虫.