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

Question

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

Answer 1

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