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
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.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