動態SVG動畫只能工作一次

我有這個動畫設置來指示哪個SVG被選中。該動畫在svg:use元素內添加了一個svg:use元素，以及3個動畫元素或animateTransform元素。感謝這裏的一些很棒的幫助，所以我能夠正常工作。動態SVG動畫只能工作一次

然而，我的新問題是動畫只能按設計一次工作。如果選擇第二個元素，則動畫似乎會嘗試進行，您可以看到筆畫寬度增加，但縮放不會發生。

我認爲這將是一個簡單的修復，通過使用setTimeout調用一個函數並在動畫完成後刪除svg:use。我沒那麼幸運。

我的問題的一個例子可以看這裏：http://codepen.io/JoeyCinAZ/pen/GHhbw

我寫信給刪除動畫功能是這裏

setTimeout(function() {removeAnimation(objID)}, 5000); 

function removeAnimation(objID) { 
    var useEl = document.getElementById(objID); 
    useEl.nextSibling.remove(); 
}

來源

2014-10-06 theFish

您是否收到任何錯誤？另外，你應該刪除anony函數：'setTimeout（removeAnimation.bind（this，objID），5000）;' – bencripps 2014-10-06 21:53:18

不，沒有錯誤被記錄。你是否說要用你評論中的匿名函數替換？ – theFish 2014-10-06 22:01:24

是的，它只是乾淨利落地完成同樣的事情 – bencripps 2014-10-06 22:01:55

您在動畫中已經兩個問題。最簡單的是持續時間，它不能以每個SVG規範開頭。所以

flash.setAttributeNS(null, 'dur', '.5s');

嚴格來說是無效的，Firefox會拒絕它。我相信，有計劃地改變SVG規範以符合Chrome的laxer行爲，但在此之前它寫成

flash.setAttributeNS(null, 'dur', '0.5s');

其次你的主要問題是，一旦你運行動畫文件時間軸從0到5.5秒（這就是你所有的動畫需要多長時間）。下一次創建動畫時，文檔時間軸因此在5.5秒，並且初始動畫不會運行，因爲它在過去，因爲它應該從0開始。你可以通過

一個）調用setCurrentTime到時間軸復位爲0，或

b任一解決這個），其具有從按鈕按壓事件的初始動畫觸發。

來源

2014-10-07 06:00:07

羅伯特，你對SVG的知識是驚人的。謝謝。我使用setCurrentTime方法，現在事情運行非常順利。 – theFish 2014-10-07 16:51:32

我有一個類似的問題之前，並通過完全刪除內容解決它包含生成的SVG的元素，然後只需在空元素中重新加載新的SVG。

而不是使用一個setTimeout這使整個事情有點怪異的，我只想把它上單擊元素選擇：

var elem = document.getElementById('myElementSelector'); 

elem.addEventListener('click', function() { 
    document.getElementById(surroundingElementID).innerHTML = ""; 
    //Check what has been clicked and call function that creates the SVG on the surroundingElementID 
}, false);

來源

2014-10-06 22:02:52 NewInTheBusiness

動態SVG動畫只能工作一次

回答

相關問題