12

このコードに基づいて、動的に生成された 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 で記述すれば、機能します。私はクロムを使用しています。

4

4 に答える 4

6

後でクロムに動的に追加すると機能しません（FFで機能します）。

http://jsfiddle.net/tap0ri/SF5nE/2/を参照

これはクロムのバグのようです。

于 2011-12-19T04:52:18.213 に答える
3

間違いなく [まだ] Chrome のバグです。Chrome 19.0.1084.52 を実行中

このコードは動作します: http://jsfiddle.net/t3d28/

このコードはまだ機能しません: http://jsfiddle.net/tap0ri/SF5nE/2/

于 2012-07-19T18:27:15.133 に答える