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

时间:2015-03-25 14:04:10

标签: css3 svg

我有这个用文本绘制的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;
  }
}

1 个答案:

答案 0 :(得分:0)

CSS动画,过渡,转换(以及JS中的classListdataset)无法在IE 11及更早版本中使用。转换/动画问题has just been fixed in the Edge engine(同样适用于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();
&#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;
&#13;
&#13;

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