css - La animación SVG no funciona en IE11

internet-explorer animation

Question

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

Aquí está el ejemplo completo: JSFiddle sample

SVG:

<svg class="circular-loader" viewBox="25 25 50 50">
  <circle class="loader-path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
</svg>

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

¿Alguna idea?

Simplemente no puedo entender qué no es compatible con IE11.

Answer 1

IE no admite animación CSS de elementos SVG. Tampoco admite las animaciones SMIL incorporadas estándar que tiene SVG.

Si convierte su animación en animaciones SVG nativas, tal vez podría hacer que funcione utilizando la biblioteca FakeSmile . De lo contrario, necesitará usar una alternativa alternativa para IE, como un gif animado o algo así.

Answer 2

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

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

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

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Answer 3

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

Tenía un SVG completo con ID y animaciones CSS, todo funcionaba perfecto para todos los demás navegadores principales.

Tengo mi SVG insertado en el HTML, por lo que puedo acceder a todos los elementos con animaciones CSS.

Para que esto funcione, debe tener su 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 = ''<svg id="''+id+''" ''+svgattrs+''>''+item.html()+''</svg>'';
        item.remove();
        $(svgcontent).prepend(html);        
    });
}

Esto toma todos los elementos en la matriz objs , e insértalos como un SVG completo detrás del primero (puede cambiar el prepend para append para cambiar este comportamiento).

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

¡Y eso es!

Answer 4

Solo Microsoft Edge admitirá transiciones y animaciones CSS SVG ... especialmente stroke-dasharray .

Consulte los documentos de desarrollador de Microsoft:

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

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

Como puedes ver en mi tenedor de tu ejemplo. No estaba viendo girar el cargador debido a que no tenía el atributo de stroke en su elemento circle .

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

Puedes ver cómo puede girar ahora. Pero tendrá que verificar si el navegador es IE y ajustar su stroke-dasharray para que sea un guión más grande. Dado que IE11 y versiones posteriores no admiten animación 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, considere el uso de una biblioteca de animación JS como la Plataforma de animación GreenSock ( GSAP ). Usando DrawSVGPlugin

DrawSVGPlugin