Riavvia sfondo Animazione SVG

Question

Ho un SVG impostato come immagine di sfondo di un elemento. La prima volta che viene visualizzato l'elemento, l'animazione viene riprodotta correttamente.

Nelle visualizzazioni successive (ad esempio se un duplicato dell'elemento viene iniettato tramite JavaScript o se l'immagine di sfondo viene rimossa e aggiunta nuovamente con CSS/JavaScript), l'animazione non parte dall'inizio. Penso che questo sia inteso come funzionalità in quanto l'immagine non è considerata come ricaricata dal browser - utilizza la versione in memoria che è già in animazione.

Ecco una demo di questo (non mia): http://www.luigifab.info/public/svg-smil/test.html

Ci sono alcuni associati segnalazioni bug del browser per Firefox e Chrome, ma come sopra credo che questo è destinato funzionalità.

C'è un modo per reimpostare/riprodurre l'animazione SVG ogni volta che viene visualizzata l'immagine?

Sono idealmente alla ricerca di una soluzione che utilizzi solo CSS e SVG, altrimenti una soluzione con JavaScript se ciò non è possibile.

Answer 1

Una possibilità è modificare l'URL dell'immagine per forzare il caricamento del browser.

Answer 2

Penso che la tua ipotesi "... poiché l'immagine non è considerata come ricaricata dal browser - utilizza la versione in memoria che è già in animazione" è corretta, dato che il file SVG è memorizzato nella cache! Quindi senza una (reale) "ricarica" ​​l'animazione non viene attivata (di nuovo).

Bene, prima diamo un'occhiata alle animazioni SVG. Ci sono due attributi che puoi usare all'interno di un elemento di animazione che sono usati per ripetere l'animazione - vedi Repeating Animations e The ‘animate’ element. Nel tuo caso l'animazione viene eseguita una sola volta (nessuna ripetizione).

Quindi avresti bisogno di Javascript per "attivare" in qualche modo l'animazione.
Questo è possibile in linea di principio (esempio: Advanced SVG Animation Techniques), ma solo se il file SVG fa parte del DOM, a cui è possibile accedere tramite Javascript. Pertanto è necessario includere il file SVG come <object>.

Non appena si utilizza un file SVG in un tag <img> o come un file CSS background-image, non si ha accesso al file per gli script.

Quindi, l'unico modo per raggiungere il tuo obiettivo è impedire al browser di memorizzare nella cache il file SVG (vedi How (and how not) to Control Caches) o di utilizzare il file SVG in un elemento <object> in modo da poter controllare l'animazione tramite Javascript .

BTW: la risposta di luigifab non è poi così male. Questo è un "trucco" spesso usato per forzare il caricamento di un file/un'immagine - vedere The Cache Trick

Answer 3

Implementazione per la risposta di luigifab. metti un po 'di random things alla fine del parametro url, questo costringerà il browser a pensare che la risorsa sia una "nuova risorsa". Demo

Answer 4

Utilizzare una chiave casuale nell'URL per il busting della cache. Sebbene il tuo esempio non abbia un'animazione lunga per testarlo correttamente, ho aggiunto la ripetizione del caricamento dell'immagine per fare notare la differenza.

url + "&" + Math.random()

No reload demo con costante URL: http://jsfiddle.net/4ZBLr/8/

Ricarica demo con casuale src URL: http://jsfiddle.net/4ZBLr/9/

Answer 5

Come @netsurfer detto, ho risolto questo problema utilizzando un object . Ecco un esempio:

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

Ogni volta che faccio l'iniezione in modo dinamico l'SVG object l'animazione riparte dall'inizio.

Answer 6

Penso che in molti scenari setCurrentTime(0) sia la soluzione migliore, se supportata dal browser. Ecco un esempio (supponendo che si utilizza il tag <object> per l'incorporamento, ovviamente):

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

Altre informazioni su l'API in questione possono essere trovate qui: https://developer.mozilla.org/en-US/docs/Web/API/SVGSVGElement