SVG動畫無法在頁面加載後使用動態創建的元素

我使用javascript動態創建svg元素及其內容，並將其添加到div中，即我的網頁。SVG動畫無法在頁面加載後使用動態創建的元素

我想重新繪製窗口大小的svg，但是，元素正在重繪，但附加的動畫不會再次重新啓動這些元素！

無論我做什麼，動畫只在頁面加載時觸發。

我試着調整大小事件如下：

排空SVG，並重新創建它裏面的元素 - 動畫上頁面加載工作，在娛樂它不是觸發
增加新動畫元素再次與相同的動畫元素 - 無論多個動畫元素出現在像rect這樣的svg元素中，他們都沒有被動畫！
刪除整個svg！ 3 :)並重新創建一切從零開始，包括svg 元素並附加到容器div - 這似乎在Chrome和Firefox上工作，奇怪的是，即使這不適用於Safari瀏覽器！

這怎麼能不行？它的一個全新的svg元素被添加到DOM中，但它們上的動畫仍然不起作用？

考慮下面的代碼：

setTimeout(function(){ 
      var anim = document.createElementNS('http://www.w3.org/2000/svg','animate'); 
    anim.setAttribute("attributeName", "height"); 
    anim.setAttribute("from", 0); 
    anim.setAttribute("to", 100); 
    anim.setAttribute("dur", "9s"); 
    anim.setAttribute("begin", "0s"); 
    anim.setAttribute("fill", "freeze"); 
      //assume i have a rect element in my svg 
    rect.appendChild(anim); 
     }, 5000);

如果持續時間小於所述時限（5秒）的動畫是不可見的，如果其比超時時，正在顯示了一些。

事實上，確實計數時停機SVG動畫元素（假設beign =「1」，什麼時候這個倒計時1：開始 -

只在頁面加載
當下動畫元素創建？
此刻動畫被連接至母體元件？

）

如果不是在頁面加載時，safari如何知道該元素之前存在，並且即使在刪除並重新創建動畫之後動畫也已完成並凍結？ O.o

我的目標是ios設備，所以支持safari是必須的。有沒有其他方法來重新調整大小的動畫svg？

有人可以在此點上一些光？我堅持這個問題...任何幫助或信息將是偉大的..謝謝。

來源

2014-02-12 T J

檢查了這一點http://stackoverflow.com/questions/14517454/animate-svg-element-every-x-seconds?rq=1 可能指向你在正確的方向 – user2991535

或許beginElement或beginElementAt方法的SVGAnimateElement是可用的。

setTimeout(function(){ 
      var anim = document.createElementNS('http://www.w3.org/2000/svg','animate'); 
    anim.setAttribute("attributeName", "height"); 
    anim.setAttribute("from", 0); 
    anim.setAttribute("to", 100); 
    anim.setAttribute("dur", "9s"); 
    anim.setAttribute("begin", "0s"); 
    anim.setAttribute("fill", "freeze"); 
      //assume i have a rect element in my svg 
    rect.appendChild(anim); 
    anim.beginElement(); 
     }, 5000);

來源

2014-03-06 07:07:38 defghi1977

'anim.beginElement（） '爲我做了 –

SVG動畫無法在頁面加載後使用動態創建的元素

回答

相關問題