Animate Path in Internet Explorer

Question

Is there any possiblity to "Fly-In" an svgpath in IE 11?

Like

@keyframes fadeInP {
    from
    {
        stroke-dashoffset:1000;
    }
  to {
    stroke-dashoffset: 0;
  }
}
.animate
{
 animation: fadeInP 10s linear infinite;
}

For

<svg  xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400">
 <path stroke-width='8' class = "animate" fill='none' stroke="#ffffff" d="M 0,0 C 100,10 200,80 300,15 " />
</svg>

This works in FF, but cant find any solution in the web to do soemthing similar in IE.

Thanks in advance

score 22 · Accepted Answer · edited Jun 20 '20 at 09:12

22

Sadly, I believe the only solution is to use JS and update the offset for every frame.

Animating SVG with CSS doesn't work in IE and neither do SMIL animations.

demo

JS:

var p = document.querySelector('.animate'), 
    offset = 1000;

var offsetMe = function() {
  if(offset < 0) offset = 1000;
  p.style.strokeDashoffset = offset;
  offset--;
  
  requestAnimationFrame(offsetMe);
}

offsetMe();

Update 26th of January 2015: the IE team is working on this.

Update #2 Edge now supports this, though only with units (that is stroke-dashoffset: 1000; won't work, but stroke-dashoffset: 1000px; will).

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 23 '14 at 18:54

Ana

35,599
6
80
131

+1 Wonderful solution. Thanks for sharing. I agree with the TO that this is very difficult to google. This is the first easy & working solution for IE i have seen on the web. – BudBrot Jul 23 '14 at 20:13
@BudBrot I've submitted an issue about this https://github.com/InternetExplorer/Status.IE/issues/117 – Ana Jul 23 '14 at 20:51
On (the Microsoft developers website)[https://developer.microsoft.com/en-us/microsoft-edge/platform/status/csstransitionsforsvgelements/] it says it is supported since build 10240. Do you know what version of Edge that is? Or is it supported for all Edge versions? – Gust van de Wal Oct 13 '17 at 01:27

Animate Path in Internet Explorer

1 Answers1

demo

JS:

Linked