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!
animation
CSS property. You can see here: jsfiddle.net/z8w4vuau/50 .. how i added thestroke
attribute for the color on the.loader-path
circle
element and increased thestroke-dasharray
so you can see it is spinning but IE is not animating yourstroke-dasharray
andstroke-dashoffset
. So just use the long-form CSS animation properties instead.circle
element: jsfiddle.net/z8w4vuau/50