與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動態添加元素

回答

相關問題