在Internet Explorer中动画路径

Question

有没有可能在IE11中将svg路径“飞入”？

例如：

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

在Firefox中可以运行，但是在网络上找不到在IE中实现类似功能的解决方案。

提前致谢。

- RandomDude

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;会起作用）。

- Ana

---

+1 个好的解决方案，谢谢分享。我同意楼主说这个问题很难通过谷歌搜索解决。这是我在网上看到的第一个易于操作且有效的 IE 解决方案。 - BudBrot

@BudBrot 我已经提交了一个关于这个问题的问题 https://github.com/InternetExplorer/Status.IE/issues/117 - Ana

在（Microsoft开发者网站）[https://developer.microsoft.com/en-us/microsoft-edge/platform/status/csstransitionsforsvgelements/]上说它从10240版本开始支持。你知道这是哪个Edge版本吗？或者它适用于所有Edge版本？ - Gust van de Wal