30

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.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Pablo
  • 475
  • 1
  • 7
  • 18
  • Which version of IE? – Sudipta Kumar Maiti Nov 19 '15 at 19:05
  • Im testing on explorer 11 – Pablo Nov 19 '15 at 19:45
  • You will have to define the stroke attribute for the color for you to see in IE. But i think you will have to use the individual CSS animation properties instead of the shorthand `animation` CSS property. You can see here: http://jsfiddle.net/z8w4vuau/50/ .. how i added the `stroke` attribute for the color on the `.loader-path` `circle` element and increased the `stroke-dasharray` so you can see it is spinning but IE is not animating your `stroke-dasharray` and `stroke-dashoffset`. So just use the long-form CSS animation properties instead. – Jonathan Marzullo Nov 19 '15 at 20:44
  • I was short on time.. but this will get you half way there once you use the long-form CSS animation properties and add the stroke attribute to your `circle` element: http://jsfiddle.net/z8w4vuau/50/ – Jonathan Marzullo Nov 19 '15 at 20:51

4 Answers4

29

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

syntagma
  • 23,346
  • 16
  • 78
  • 134
Jonathan Marzullo
  • 6,879
  • 2
  • 40
  • 46
  • 3
    Looking at it in Edge (20.10240.16384.0) it doesn't work at all. I removed everything that isn't required from the fiddle so it's easier to see it: http://jsfiddle.net/z8w4vuau/55/ – Martin Schuhfuß Nov 27 '15 at 12:05
  • Microsoft states that it supports CSS Animations on stroke-dasharray on the reference for stroke-dasharray page https://msdn.microsoft.com/en-us/library/ff972274(v=vs.85).aspx .. But it is IE so buggy or non working behavior is expected for css transitions and css animation.. could be a browser bug? But have you tried looking into a JS solution like GreenSock GSAP DrawSVGPlugin? Check the example on this page in IE Edge .. http://greensock.com/drawSVG – Jonathan Marzullo Nov 27 '15 at 19:57
  • I am on a JS-library-diet so to say :) But I am aware that i could've done this using javascript. However, It's not that important so I just feature-detect and disable these animations in IE/Edge until that has been fixed. – Martin Schuhfuß Nov 30 '15 at 14:39
  • 2
    Following this answer, I decided to target the SVG animations on IE11 using Modernzr's "no-smil" class. That way I could pick a static graphic and still use the same SVG. – Jason Lydon May 23 '16 at 19:45
8

IE does not support CSS animation of SVG elements. It also doesn't support the standard built-in SMIL animations that SVG has.

If you convert your animation to native SVG animations, you could perhaps get it working using the FakeSmile library. Otherwise you will need to use some alternative fallback for IE - such as an animated gif or something.

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
7

IE11 supports CSS3 animations but not on child nodes of an SVG element. You can animate the SVG node itself so my solution is to break up the parts into separate SVGs and animate those with CSS3.

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

This will even work if IE11 is in compatibility mode if you add the meta tag

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
getsetbro
  • 1,798
  • 1
  • 22
  • 33
  • This is very interesting, and the more I think about it, the more I realize it will probably solve my problem without a major rework. – BBaysinger Jul 09 '20 at 23:15
0

For anyone having trouble with this, I have a workaround.

I had a full SVG with IDs and CSS animations, all working perfect for all the other major browsers.

I have my SVG inserted into the HTML, so I can access every item with CSS animations.

For this to work, you have to have your SVG with position: 

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

... inside a container .svgcontent (or whatever you want to call it)

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 = '<svg id="'+id+'" '+svgattrs+'>'+item.html()+'</svg>';
        item.remove();
        $(svgcontent).prepend(html);        
    });
}

This takes all the elements in the objs array, and insert them as a full SVG behind the first one (you can change prepend to append to change this behavior).

And the SVG is going to have the same id as the object, so the CSS animate is going to apply to a full SVG, not an SVG object.

And that's it!

Gabiton
  • 21
  • 3