2016-10-17 9 views
-3

svg内で画像をアニメーション化する必要があります。私はcss3アニメーションでこれをやっています。何とかInternet Explorerで動作していません。それはFirefoxとChromeでうまくいきます。CSS Internet ExplorerでSVG画像のアニメーションが動作しない

css3アニメーションは、インターネットエクスプローラで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>

答えて

2

あなたは、ブラウザが特定の機能をサポートしているかどうかを確認するためにウェブサイト​​を使用することができます。ここでは、SVGアニメーションが実際にInternet Explorerでサポートされていないことがわかります。http://caniuse.com/#search=svg%20animation

関連する問題