La animación SVG no está funcionando en IE11

Tengo una animación de carga realmente simple que funciona perfectamente en Firefox y Chrome, pero en IE11 no muestra la figura de SVG.

Aquí está el ejemplo completo: muestra JSFiddle

SVG:

   

La animación, que es una rotación, está trabajando en IE11, pero el SVG, que es un círculo, no se está mostrando.

¿Alguna idea?

Simplemente no puedo entender lo que no está siendo compatible con IE11.

Solo Microsoft Edge admitirá SVG CSS Transitions and Animation … especialmente stroke-dasharray .

Por favor, consulte los Documentos para desarrolladores de Microsoft:

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

Permite que las transiciones CSS y las animaciones se apliquen a los elementos SVG.
Versión no prefijada: Microsoft Edge build 10240+

Como puedes ver en mi fork de tu ejemplo. No veías el giro del cargador debido a que no tenía el atributo de stroke en tu elemento de circle .

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

Puedes ver cómo puede girar ahora. Pero deberás verificar si el navegador es IE y ajustar tu stroke-dasharray para que sea más grande. Como IE11 y versiones posteriores no son compatibles con la animación de SVG stroke-dasharray y stroke-dashoffset con animación CSS o transiciones, a menos que sea Microsoft Edge build 10240+.

Pero si necesita una solución de navegador cruzado para animar SVG, especialmente stroke-dasharray y stroke-dashoffset . Luego investigue usando una biblioteca de animación JS como la plataforma de animación GreenSock ( GSAP ). Usando DrawSVGPlugin

https://greensock.com/drawSVG

IE no es compatible con la animación CSS de elementos SVG. Tampoco es compatible con las animaciones SMIL integradas estándar que tiene SVG.

Si convierte su animación a animaciones SVG nativas, quizás pueda hacer que funcione usando la biblioteca FakeSmile . De lo contrario, tendrá que utilizar alguna alternativa alternativa para IE, como un gif animado o algo así.

Para cualquier persona que tenga problemas con esto, tengo una solución alternativa.

Tenía un SVG completo con identificaciones y animaciones CSS, todo funcionaba perfectamente para todos los otros navegadores principales.

Tengo mi SVG insertado en el HTML, por lo que puedo acceder a cada elemento con animaciones CSS.

Para que esto funcione, debes tener tu SVG con posición:

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

… dentro de un contenedor .svgcontent (o como quieras llamarlo)

Guión:

 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); }); } 

Esto toma todos los elementos de la matriz objs e los inserta como un SVG completo detrás de la primera (puede cambiar antes de append para cambiar este comportamiento).

Y el SVG tendrá la misma identificación que el objeto, por lo que la animación de CSS se aplicará a un SVG completo, no a un objeto SVG.

¡Y eso es!

IE11 admite animaciones CSS3 pero no en nodos secundarios de un elemento SVG. Puede animar el nodo SVG en sí, así que mi solución es dividir las partes en SVG separados y animarlos con CSS3.

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

Esto incluso funcionará si IE11 está en modo de compatibilidad si agrega la metaetiqueta