与SVG动态添加元素

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

来源

2011-12-10 Hendekagon

这是工作，Chrome会V15 http://jsfiddle.net/SF5nE/ – Bakudan

升级，而它的工作 - 谢谢！ – Hendekagon

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

看到http://jsfiddle.net/tap0ri/SF5nE/2/

这似乎是镀铬的bug。

来源

2011-12-19 04:52:18 Chetan

是的，这是非常烦人的，因为它意味着你不能触发动画来响应服务器的消息 – Hendekagon

我试图在document.ready上创建一些“svg pool”，我会使用任何svg动态添加内部元素它。 – Chetan

请详细说明... – Hendekagon

绝对[仍然] Chrome的错误。运行Chrome 19.0.1084.52

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

此代码仍然不能正常工作： http://jsfiddle.net/tap0ri/SF5nE/2/

来源

2012-07-19 18:27:15 Mark

-1

是否与视框= “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-13 18:14:27 blonchkman

这与这个问题有什么关系？ –

我还是一样的问题5今年前:)（与SVG-筛选过）

我用如下黑客：

1.我将setAtteribute设置为所有可能的属性，例如 ani.setAttr ibute（“attributeName”，“transform”）;

2.我读取和设置我的SVG根的innerHTML： $ svgRoot.html（$ svgRoot.html（））;

希望它可以帮助别人，或者有人能告诉我一个更好的办法:)

来源

2017-10-31 11:07:14 Bergi

与SVG动态添加元素

回答

相关问题