SVG line animation not working in IE

Question

I am using a carousel that animates the stroke-dasharray but it doesnt work in IE.

my SVG:

 <svg class="facts__svgs" viewBox="-10 -10 220 220" data-facts-stoke-svg="">
 <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="651"></path>
 </svg>

My JS that changes the stroke:

function calculateDashArray(percentage) {
    return (dashOffset * 2) - (segmentOfDashOffset * percentage) - 20;
}

function animateFactsSVG(percentage) {
    elPath.style.strokeDasharray = calculateDashArray(percentage);
}

In everything apart from IE this works. In IE the dasharray style is applied but the svg does not change.

Your question is very vague. What are you trying to accomplish? I've added the code in a web page and started to change the percentage, I see no difference. What is dashOffset? what is segmentOfDashOffset? — Siderite Zackwehdex, Apr 01 '16 at 08:41
Here is my codepen example - http://codepen.io/mattclaffey/pen/PNJGRo — MattClaff, Apr 01 '16 at 09:04

score 1 · Accepted Answer · edited May 23 '17 at 12:31

I have taken your example and placed it in Internet Explorer and it didn't work. Then I started playing with the various properties to see how I could get to your desired effect. The only way I could make the change in the dasharray reflect graphically was to reset the 'd' attribute: elPath.setAttribute('d',elPath.getAttribute('d')); which made the dasharray show as required, but destroyed the animation. Another way to make the changes appear was to add a second comma separated parameter to dasharray, like '1008.58,100%', but it wouldn't create the desired effect either.

I have to conclude that Internet Explorer doesn't deal well with one value stroke-dasharray and you should probably look for another solution.

I actually made it work with a circle instead of a path like this:

<svg xmlns="http://www.w3.org/2000/svg" style="width:100%;height:100%" >
    <circle cx="100" cy="100" r="100" stroke="green" stroke-width="1" fill="none" style="stroke-dasharray:228,628;transition: all .6s ease;"  ></circle>
</svg>
<script>
    var el=document.getElementsByTagName('circle')[0];
    var circumference=2*Math.PI*(+el.getAttribute('r'));
    function animatePercentage(per) {
       el.style.strokeDasharray=(per/100*circumference)+','+((1-per/100)*circumference);
    }
    setInterval(function() {
        animatePercentage(70);
    },2000);
</script>

No animation, though. The value changes instantly on IE. Apparently this doesn't work in Internet Explorer, only Edge (see SVG animation is not working on IE11)

Updated the code and saved it in a CodePen here: http://codepen.io/anon/pen/wGPwYq

Thank you. Did you make a codepen example for me to look at? — MattClaff, Apr 04 '16 at 07:50
I guess if it works with no animation in IE then that would be fine because we follow a progressive enhancement methods so this would be a feature thats works in older browsers but it has better functionality in newer browsers. I tested that method in codepen and what I was trying to achieve didnt work as you can see here - http://codepen.io/mattclaffey/pen/xVPKrM — MattClaff, Apr 04 '16 at 07:57
Updated the code. I defined the blank space as the rest of the circumference. — Siderite Zackwehdex, Apr 04 '16 at 08:36
Hey thanks a lot for this. Worked a treat in IE9 + once I got it working with my code. Nice one :) — MattClaff, Apr 04 '16 at 09:06

SVG line animation not working in IE

1 Answers1