CSS Internet Explorer에서 SVG 이미지의 애니메이션이 작동하지 않습니다.

-3

svg 내에서 이미지를 애니메이션화해야합니다. 나는 css3 애니메이션으로 이것을하고있다. 하지만 어떻게 든 Internet Explorer에서 작동하지 않습니다. 그것은 파이어 폭스와 크롬에서 잘 작동합니다.CSS Internet Explorer에서 SVG 이미지의 애니메이션이 작동하지 않습니다.

css3 애니메이션이 svg 이미지 용 Internet Explorer에서 지원됩니까?

.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>

출처

2016-10-17 Jaimin Dave