SVG animation is not working on IE11

canute picture canute · Nov 19, 2015 · Viewed 61.2k times · Source

I have a really simple loading animation that works perfectly on Firefox and Chrome, but in IE11 it's not showing the SVG figure.

Here is the full example: 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>

The animation, which is a rotation, is working on IE11, but the SVG, which is a circle, is not being displayed.

Any idea?

I just can't figure out what is not being supported by IE11.

Answer

Jonathan Marzullo picture Jonathan Marzullo · Nov 20, 2015

Only Microsoft Edge will support SVG CSS Transitions and Animation.. especially stroke-dasharray.

Please see the Microsoft Developer Docs:

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

Allows CSS Transitions and Animations to apply to SVG elements.
Unprefixed version: Microsoft Edge build 10240+

As you can see in my fork of your example. You were not seeing the loader spin due to not having the stroke attribute on your circle element.

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

You can see how it can spin now. But you will have to check if the browser is IE and adjust your stroke-dasharray so it is larger dash. Since IE11 and below do not support animating SVG stroke-dasharray and stroke-dashoffset with CSS animation or transitions, unless it is Microsoft Edge build 10240+.

But if you need a cross browser solution to animate SVG, especially stroke-dasharray and stroke-dashoffset, then look into using a JS animation library like the GreenSock Animation Platform (GSAP). Using the DrawSVGPlugin

https://greensock.com/drawSVG