重新啓動背景SVG動畫

我有一個SVG設定爲元件的背景圖像。元素第一次顯示時，動畫播放正確。重新啓動背景SVG動畫

在後續的顯示器（例如，如果該元素的副本被通過JavaScript注入，或如果背景圖像被移除並且添加回用CSS/JavaScript的），動畫不從頭開始。我認爲這是預期的功能，因爲該圖像不被瀏覽器重新加載 - 它使用已經具有動畫效果的內存版本。

這裏就是一個演示（不是我）： http://www.luigifab.info/public/svg-smil/test.html

有用於Firefox和Chrome一些相關的瀏覽器的bug報告，但正如上面我覺得這是預期的功能。

有每當顯示的圖像沒有辦法讓我的SVG動畫重置/重播？

我非常期待使用CSS只和SVG的解決方案 - 別人用JavaScript的解決方案，如果這是不可能的。

來源

2013-10-04 Alasdair McLeay

你的SVG圖像無法顯示正確的.. ？這是問題呃..？ –

SVGs正在顯示，他們只是沒有動畫在隨後的顯示。如果你點擊上面的演示鏈接，然後點擊'顯示'，你會看到SVG動畫。點擊「隱藏」，然後再次「顯示」，SVG不會動畫。 –

你能告訴我你的Animate代碼嗎？ –

一種可能性是改變圖像的URL強制瀏覽器重新加載。

來源

2013-11-11 17:35:54 luigifab

每當有人訪問該頁面時都要更改它！？ –

是的，這不是一個好主意（針對網絡使用），但它起作用。 – luigifab

我覺得你的猜測「......作爲圖像不被認爲已被重新加載瀏覽器 - 它使用在已經存儲的動畫版」是正確的，因爲SVG文件緩存！所以沒有（真正的）「重新加載」，動畫不會被觸發（再次）。

嗯，首先讓我們來看看SVG動畫。還有，你可以被用來重複動畫的動畫元素中使用兩個屬性 - 見Repeating Animations和The ‘animate’ element。在你的情況下，動畫只運行一次（不重複）。

所以你需要使用Javascript以某種方式「觸發」的動畫。
這是可能的原則（例如：Advanced SVG Animation Techniques），但前提是SVG文件是DOM，您可以通過JavaScript訪問的一部分。因此，您必須將該SVG文件包含爲<object>。

只要在<img>標記中使用SVG文件，或者作爲CSS background-image，就沒有腳本訪問該文件的權限。

所以，我能想到的，以實現自己的目標的唯一途徑是防止瀏覽器緩存SVG文件（見How (and how not) to Control Caches），或使用SVG文件中的一個<object>元素，這樣就可以控制通過Javascript動畫。

BTW：luigifab的答案是沒有那麼糟糕。這是一個經常使用的「技巧」來強制重新加載文件/圖像 - 請參閱The Cache Trick

來源

2014-01-28 00:55:39 Netsurfer

luigifab的答案的實現。將一些random things放在url參數的末尾，這會強制瀏覽器認爲資源是「新資源」。 Demo

來源

2014-01-30 16:23:00 AzDesign

在URL中使用緩存清除的隨機密鑰。儘管您的示例沒有長動畫來正確測試它，但我已添加重複的加載圖像以使差異顯而易見。

url + "&" + Math.random()

沒有重裝演示恆定URL：http://jsfiddle.net/4ZBLr/8/

刷新演示用隨機URL SRC：http://jsfiddle.net/4ZBLr/9/

來源

2014-01-31 12:43:34 DhruvPathak

正如@netsurfer說，我通過使用object解決了這個問題。這裏有一個例子：

<object type="image/svg+xml" data="my.svg"></object>

我每次動態注入動畫從頭開始的SVG object。

來源

2017-05-26 00:47:34 IvanRF

這對我來說很有魅力 – hugostacks

我認爲在很多情況下setCurrentTime(0)是最好的解決方案 - 如果瀏覽器支持。下面是一個例子（假設你使用<object>標籤嵌入，當然）：

let content = document.getElementById("object-id").contentDocument; 
let svg = content.getElementsByTagName("svg")[0]; 
if(svg.getCurrentTime() > 10) 
    svg.setCurrentTime(0);

更多相關API的相關信息可以在這裏找到： https://developer.mozilla.org/en-US/docs/Web/API/SVGSVGElement

來源

2017-05-28 10:09:55

重新啓動背景SVG動畫

回答

相關問題