SVG animation is not working on IE11

by

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

More Related Contents:

  1. How to animate handwriting text on the web page using SVG?
  2. Deprecated SMIL SVG animation replaced with CSS or Web animations effects (hover, click)
  3. Transparent arrow/triangle indented over an image
  4. How to change the color of an svg element?
  5. Text in a flex container doesn’t wrap in IE11
  6. Invert rounded corner in CSS?
  7. Background color of text in SVG
  8. Transparent hollow or cut out circle
  9. How to resize the ClipPath area of SVG?
  10. CSS :before on inline SVG
  11. Wave (or shape?) with border on CSS3
  12. Triangle shape with background image
  13. How to have css3 animation to loop forever
  14. How do I center an SVG in a div?
  15. How to make a element expand or contract to its parent container?
  16. SVG gradient using CSS
  17. Simple CSS Animation Loop – Fading In & Out “Loading” Text
  18. CSS transition auto height not working [duplicate]
  19. Flex auto margin not working in IE10/11
  20. element not working in Internet Explorer 11
  21. Add ellipses to overflowing text in SVG?
  22. How to Include CSS style when converting svg to png
  23. CSS transform origin issue on svg sub-element
  24. Filling water animation
  25. CSS3 – 3D Flip Animation – IE10 transform-origin: preserve-3d workaround
  26. 3d transforms on SVG element
  27. Reuse CSS animation in reversed direction (by resetting the state?)
  28. How do you style a external svg with css
  29. Using SVG as background image
  30. Why don’t CSS filters work on SVG elements in Chrome?

Leave a Comment