html - Internet Explorer 中的动画路径

Question

是否有可能在 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 动画也不起作用。

演示

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 日更新： IE 团队正在努力解决这个问题。

更新 #2 Edge 现在支持这一点，但仅适用于单位（这stroke-dashoffset: 1000;不起作用，但stroke-dashoffset: 1000px;会）。