SVG动画在Safari/IE中无法工作

Question

我有一个SVG线条动画绘制文本，但它似乎不能在Safari或Internet Explorer上工作。是不是我漏了什么？

http://codepen.io/anon/pen/vygdzv

CSS

svg path {
  fill: none;
  stroke: #000;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1700;
  stroke-dashoffset: 1700;
  animation: dash 5s ease-out forwards;
   -webkit-animation-name:dash;
  -webkit-animation-duration:5s;
  -webkit-animation-timing-function:ease-out;
  -webkit-animation-fill-mode:forwards;
 -moz-animation: dash 5s ease-out forwards;
  -o-animation: dash 5s ease-out forwards;
  -ms-animation: dash 5s ease-out forwards;

}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

@-moz-keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

@-o-keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

@-ms-keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

Answer 1

CSS动画、转换、转换（以及JS中的classlist或dataset)在IE11及更早版本中不起作用。过渡/动画问题刚刚在Edge引擎中得到了解决(classlist),但是对于IE11和更早的版本,唯一的解决方案是使用JS（SMIL动画也不起作用,另外Chrome可能也会删除SMIL-更新：SMIL即将退出,不要使用它！）。

这是一个你可以如何做的例子：

var p = document.querySelector('.animate'), 
    offset = 1000;

var offsetMe = function() {
  if(offset < 0) offset = 1000;
  p.style.strokeDashoffset = offset;
  offset--;
  
  requestAnimationFrame(offsetMe);
}

offsetMe();

@keyframes fadeInP {
  to {
    stroke-dashoffset: 0;
  }
}
.animate {
  stroke-dashoffset: 1000;
  /*animation: fadeInP 10s linear infinite;*/
}

/*
CSS animations don't work for this in IE and neither do SMIL animations.
*/

<svg viewBox="0 0 400 400">
 <path stroke-width='8' class="animate" stroke-dasharray="10 10" fill='none' stroke="#000" d="M 0,0 C 100,10 200,80 300,15 " />
</svg>