L’animazione SVG non funziona su IE11

Ho un’animazione di caricamento davvero semplice che funziona perfettamente su Firefox e Chrome, ma in IE11 non mostra la figura SVG.

Ecco l’esempio completo: esempio JSFiddle

SVG:

   

L’animazione, che è una rotazione, funziona su IE11, ma l’SVG, che è un cerchio, non viene visualizzato.

Qualche idea?

Non riesco proprio a capire cosa non viene supportato da IE11.

Solo Microsoft Edge supporterà SVG CSS Transitions and Animation .. in particolare stroke-dasharray .

Si prega di consultare i documenti dello sviluppatore Microsoft:

https://dev.windows.com/en-us/microsoft-edge/platform/status/csstransitionsanimationsforsvgelements

Consente alle transizioni CSS e alle animazioni di applicare agli elementi SVG.
Versione non prefissa: Microsoft Edge build 10240+

Come puoi vedere nella mia forchetta del tuo esempio. Non vedevi il caricamento del caricatore a causa del non avere l’attributo stroke sul tuo elemento circle .

https://jsfiddle.net/z8w4vuau/50/

Puoi vedere come può girare ora. Ma dovrai controllare se il browser è IE e regolare il tuo stroke-dasharray modo che sia un trattino più grande. Dal momento che IE11 e versioni successive non supportano l’animazione di SVG stroke-dasharray e stroke-dashoffset con animazioni CSS o transizioni, a meno che non sia Microsoft Edge build 10240+.

Ma se hai bisogno di una soluzione cross browser per animare SVG, specialmente stroke-dasharray e stroke-dashoffset . Quindi cerca di utilizzare una libreria di animazioni JS come la GreenSock Animation Platform ( GSAP ). Uso di DrawSVGPlugin

https://greensock.com/drawSVG

IE non supporta l’animazione CSS degli elementi SVG. Inoltre, non supporta le animazioni SMIL incorporate standard che SVG ha.

Se si converte l’animazione in animazioni SVG native, è ansible farlo funzionare utilizzando la libreria FakeSmile . Altrimenti dovrai utilizzare un fallback alternativo per IE, ad esempio una gif animata o qualcosa del genere.

Per chiunque abbia problemi con questo, ho una soluzione alternativa.

Avevo un SVG completo con ID e animazioni CSS, tutto perfettamente funzionante per tutti gli altri principali browser.

Ho inserito il mio SVG nell’HTML, così posso accedere a ogni elemento con animazioni CSS.

Perché funzioni, devi avere il tuo SVG con la posizione:

 absolute; top: 0px; left: 0px, 

… all’interno di un contenitore .svgcontent (o come vuoi chiamarlo)

script:

 var IE = (navigator.userAgent.indexOf("Edge") > -1 || navigator.userAgent.indexOf("Trident/7.0") > -1) ? true : false; objs = [ '#file1', '#file2','#file3','#file4','#file5','#file6','#file7','#file8','#file9','#file10','#file11', '#bottom' ]; if ( IE ){ objs.forEach(function (item) { item = $(item); id = item.attr('id'); svgcontent = item.closest('.svgcontent') svg = item.closest('svg'); svgattrs = ' width='+svg.attr('width')+' height='+svg.attr('height')+' ' html = ''+item.html()+''; item.remove(); $(svgcontent).prepend(html); }); } 

Questo prende tutti gli elementi nell’array objs e li inserisce come SVG completo dietro al primo (è ansible modificare prepend per modificare questo comportamento).

E SVG avrà lo stesso id dell’object, quindi il CSS animato si applicherà a un SVG completo, non a un object SVG.

E questo è tutto!

IE11 supporta animazioni CSS3 ma non su nodes figlio di un elemento SVG. È ansible animare il nodo SVG stesso, quindi la mia soluzione è suddividere le parti in SVG separati e animare quelli con CSS3.

https://codepen.io/getsetbro/full/Bxeyaw/

Funzionerà anche se IE11 è in modalità compatibilità se aggiungi il meta tag