Animate Path in Internet Explorer

问题:

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

回答1:

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

文章来源: Animate Path in Internet Explorer