在Internet Explorer中动态路径 [英] Animate Path in Internet Explorer

问题描述

在IE 11中飞入svgpath是否有可能？

喜欢

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

对于

 < svg xmlns =http://www.w3.org/2000/svgversion =1.1xmlns：xlink =http://www.w3.org/1999 / xlinkviewBox =0 0 400 400> 
< path stroke-width ='8'class =animatefill ='none'stroke =＃ffffffd =M 0,0 C 100,10 200,80 300,15/> ; 
< / svg> 
  

这在FF中有效，但是在网络中找不到任何类似IE的解决方案。 / p>

提前感谢

解决方案

使用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 现在支持这一点，虽然只有单位（即 stroke-dashoffset：1000; 将无效，但 -dashoffset：1000px; will）。

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

解决方案

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

这篇关于在Internet Explorer中动态路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！