Internet Explorer中的动画路径

Question

IE 11中的"Fly-In"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;将会).