CSS, применяемый к SVG, не анимируется в IE11 или Edge - PullRequest
Новая
       8

CSS, применяемый к SVG, не анимируется в IE11 или Edge

0 голосов
/ 30 мая 2018

У меня есть изображение 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>

Я попытался использовать авторефиксер https://autoprefixer.github.io/ и следовал совету, что размещение ключевых кадров в верхней части CSS может помочь, но это не имеет значения.

В чем проблема IE с CSS?

1 Ответ

0 голосов
/ 30 мая 2018

Я добавил очень простое решение с использованием 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 и управлять функциями синхронизации.Но вы также должны понимать, что это добавляет дополнительную зависимость вашему проекту.Поэтому я оставляю это решение на ваше решение.

...