Question

我有一个SVG图像和一个CSS动画应用于它。

文档说这应该在IE中呈现，虽然它可以在其他浏览器（例如Chrome和Firefox）中使用，但在使用IE浏览器时不会应用动画。

@-webkit-keyframes loading-icon-line2 {
  0% {
    stroke-dashoffset: 268%;
  }

  50% {
    stroke-dashoffset: 0%;
  }

  70% {
    stroke-dashoffset: 0%;
  }

  100% {
    stroke-dashoffset: -268%;
  }
}

@keyframes loading-icon-line2 {
  0% {
    stroke-dashoffset: 268%;
  }

  50% {
    stroke-dashoffset: 0%;
  }

  70% {
    stroke-dashoffset: 0%;
  }

  100% {
    stroke-dashoffset: -268%;
  }
}

#loading-icon .line2 {
  stroke-dashoffset: 0%;
  stroke-dasharray: 268%;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(0.75, 0.30, 0.25, 1);
  -webkit-animation-name: loading-icon-line2;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.75, 0.30, 0.25, 1);
  animation-name: loading-icon-line2;
}

 
<div style="width:50px;height:50px;">
<svg version="1.1" id="loading-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 271.8 271.8" style="enable-background:new 0 0 271.8 271.8;" xml:space="preserve">
  <circle fill="#FFFFFF" cx="135.9" cy="135.9" r="135.9"/>
  <path class="line1" fill="none" stroke="#AB0A3D" stroke-width="25.5" d="M74.9,92.6c0,0,55.3,105,55.4,105.2c0.1-0.2,73.3-144.7,73.3-144.7"/>
  <path fill="#FFFFFF" d="M207.7,55.2l-81.8,161.4L63.7,98.7h29l42.3,80.9l62.5-124.4L207.7,55.2 M232.1,40.2h-24.4h-10.2h-9.3l-4.2,8.3l-49.4,98.3l-28.7-55l-4.2-8h-9.1h-29H38.8l11.6,22l62.2,117.9l13.5,25.7l13.1-25.9L221.1,62L232.1,40.2L232.1,40.2z"/>
  <circle class="line2" fill="none" stroke="#AB0A3D" stroke-width="6" cx="135.9" cy="135.9" r="115.7"/>
</svg>
</div>

我尝试使用autoprefixer https://autoprefixer.github.io/，并遵循将关键帧放在CSS顶部的建议可以提供帮助，但它没有任何区别。

IE与CSS有什么问题？

Answer 1

我使用tweenmax添加了一个非常简单的解决方案。

  <circle class="animate" fill="none" stroke="#AB0A3D" stroke-width="6" cx="135.9" cy="135.9" r="115.7"/>

 var circle = document.querySelector('.animate'),tween;

 tween = TweenMax.fromTo(circle, 1.5, {strokeDashoffset:"268%"},{strokeDashoffset:"-268%",repeat: -1, ease: Power1.easeOut});

https://codepen.io/pen/mKyMNd

此解决方案对于跨浏览器实施非常有用。我选择了TweenMax，因为它可以节省编写所有raf代码和管理计时功能的危险。但是您还需要意识到这会为您的项目增加额外的依赖性。所以我将这个解决方案留给你做出决定。

应用于SVG的CSS不会在IE11或Edge中设置动画

1 个答案: