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 编写等效代码，它就可以工作。我正在使用 Chrome。

4

4 回答 4

6

如果稍后在 chrome 上动态添加，它将不起作用（适用于 FF）。

见http://jsfiddle.net/tap0ri/SF5nE/2/

这似乎是 chrome 错误。

于 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 回答
0

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

我使用跟随黑客：

1.我用setAtteribute设置了所有可能的属性，例如 ani.setAttribute("attributeName", "transform");

2. 我阅读并设置了我的 svg-root innerhtml: $svgRoot.html($svgRoot.html());

希望它可以帮助某人，或者有人可以告诉我更好的方法:)

于 2017-10-31T11:07:14.713 回答
-1

不适用于 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/

于 2015-02-13T18:14:27.360 回答