css animation and animation-direction not working in IE11

Question

I am trying to show animated dashed lines in an SVG path. Path is generated dynamically using d3 and animation can be in both the directions. Its working in all browsers except in IE. Fiddle Link My issue is similar to SVG animation is not working on IE11 . But I couldn't get the solution from there.

<path id="pathOriginal" class="animation" style="animation-direction:reverse" d="M535,73C33.75,73 33.75,-20 -467.5,-20" stroke="red" stroke-width="1.5px" fill="none">

    @keyframes dash {
    from {
        stroke-dashoffset: 1000;
    }
    to {
        stroke-dashoffset: 0;
    }
    }
@-webkit-keyframes dash {
    from {
        stroke-dashoffset: 1000;
    }
    to {
        stroke-dashoffset: 0;
    }
}
.animation {
    stroke-dasharray: 4;
    stroke-dashoffset: 4;
    animation: dash 50s linear infinite;
    -webkit-animation: dash 2s linear infinite;
}

score 2 · Accepted Answer · answered Jun 24 '16 at 16:41

Last resort is to use some javascript magic!

var myPath = document.getElementById('pathOriginal');

var i = 1000;
var intervalID = window.setInterval(myCallback, 20);

function myCallback() {
  // Your code here
  if (i == 0) { i = 1000}
  myPath.setAttribute('stroke-dashoffset', i);
  --i;
}

<svg width="500" height="500" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<g transform="translate(200,200)">
<path id="pathOriginal" class="animation" style="animation-direction:reverse" d="M535,73C33.75,73 33.75,-20 -467.5,-20" stroke="red" stroke-width="1.5px" fill="none" stroke-dasharray="4">
</path>
</g>
</svg>

You're welcome. If solution works, do click on the 'accept' checkmark so that future readers can reuse this solution in similar scenario. — Alvin K., Jun 28 '16 at 07:39

score 1 · Answer 2 · answered Jun 24 '16 at 12:19

1

IE don't support CSS animations on all SVG elements. you have to modify the inline attributes of the SVG elements

answered Jun 24 '16 at 12:19

Искрен Станиславов

527
5
23

Is there any alternate way to show the path like animated? – Jerry Jun 24 '16 at 12:21
1

Greensock's drawSVG comes with a subscription cost (plus learning curve) vs. 7 lines of coding below to replace CSS animation, – Alvin K. Jun 24 '16 at 16:45

css animation and animation-direction not working in IE11

2 Answers2

Linked