Internet Explorer中的动画路径

Question

是否有可能进入＆＃34; Fly-In＆＃34; IE 11中的svgpath？

像

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

有关

<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>

这适用于FF，但无法在网络上找到任何类似IE的解决方案。

提前致谢

Answer 1

可悲的是，我认为唯一的解决方案是使用JS并更新每一帧的偏移量。

使用CSS动画制作SVG并不适用于IE，也没有SMIL动画。

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();

更新 2015年1月26日：the IE team is working on this。

更新＃2 Edge现在支持此功能，虽然只有单位（stroke-dashoffset: 1000;无法正常工作，但是stroke-dashoffset: 1000px;会）。