Question

我有这个用文本绘制的SVG线动画，但它似乎不适用于Safari和Internet Explorer。是否有我遗失的东西？

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）无法在IE 11及更早版本中使用。转换/动画问题has just been fixed in the Edge engine（同样适用于classList），但对于IE11及更早版本，唯一的解决方案是使用JS（SMIL动画也不会工作，加上Chrome可能会丢失SMIL同样 - 更新：SMIL即将推出，不要使用它！）。

这是一个如何做到这一点的例子：

＆＃13;

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

＆＃13;

@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.
*/

＆＃13;

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

＆＃13;

关于你的代码的一个快速说明：总是最后编写未加前缀的规则版本，你不需要-ms-animation（IE10 +支持动画没有前缀，而IE9根本不支持它们。）

SVG动画无法在Safari / IE中运行

1 个答案: