Блог

Главная - Вопросы по программированию - CSS-анимация SVG-изображений, не работающих в Internet Explorer

CSS-анимация SVG-изображений, не работающих в Internet Explorer

#css #svg #css-animations #svg-animate

#css — код #svg #css-анимация #svg-анимировать

Вопрос:

Мне нужно анимировать изображения внутри svg. Я делаю это с помощью анимации css3. но почему-то он не работает в Internet Explorer. он отлично работает в Firefox и Chrome.

анимация css3 поддерживается в Internet Explorer для svg-изображений?

Ниже приведен мой код:

 .animated {
  -webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
} 
 <svg viewBox="0 0 2480 2480" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
  <image class="animated fadeIn" width="2480" height="2480" y="0" x="0" xlink:href="/demo.Site/Media/Templates/1/digital/bg.png" xmlns:xlink="http://www.w3.org/1999/xlink" />
</svg>

Ответ №1:

Вы можете использовать веб-сайт caniuse.com чтобы проверить, поддерживает ли браузер определенную функцию. Здесь вы можете видеть, что SVG-анимация действительно не поддерживается в Internet Explorer: http://caniuse.com/#search=svg animation

Метки: