SVG動畫無法在IE9/IE10中使用，但可在Firefox和Chrome中使用

請參考下面的代碼。SVG動畫無法在IE9/IE10中使用，但可在Firefox和Chrome中使用

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <defs> 
     <clipPath id="curtainClip"> 
      <rect id="clipRect" x="0" y="0" width="100" height="100"/> 
     </clipPath> 
    </defs> 

    <animate xlink:href="#clipRect" 
     attributeName="width" 
     dur="15s" 
     from="0" 
     to="100" /> 

    <path clip-path="url(#curtainClip)" stroke="red" d="M 0 0 L 100 100"/> 
</svg>

SVg animate元素在IE瀏覽器中不起作用。我怎樣才能解決這個問題？無論是在IE10瀏覽器中的錯誤還是我需要添加任何進一步的代碼在IE瀏覽器中工作。

我已提及以下鏈接。

Can't make SVG animation work with ie9 and firefox

感謝，

溼婆

來源

2013-03-08 SivaRajini

你是否在IE的調試模式下得到任何javascript錯誤？ – 2013-03-08 08:55:12

IE中沒有javascript錯誤。顯示svg組件，但動畫只在IE中不起作用。 – SivaRajini 2013-03-08 08:59:49

您使用SMIL（聲明）的動畫，這是not supported in Internet Explorer。據我所知，微軟並沒有計劃永遠支持它。從this頁，

「基於腳本的動畫打開大門，簡單和複雜的動畫的可能性。正因爲如此，對於其他原因（例如如CSS動畫），IE9不支持聲明性動畫「。

微軟真的希望你使用基於腳本的動畫。所以如果你想讓你的SVG在當前所有的瀏覽器中都有動畫，你需要用Javascript來完成。或者，正如微軟暗示的那樣，您可以使用CSS animation。在我看來，在你的例子中，一個CSS動畫將是簡單動畫的最佳選擇。

來源

2013-03-08 11:52:17 SirCxyrtyx

可以使用FakeSMILe製作IE9 +動畫聲明元素，請參閱http://leunen.me/fakesmile/index.html。 – 2013-03-08 13:32:26

和微軟一樣：其他人都支持這個標準，但是我們會阻止你使用它。幸運的是，有些圖書館可以填充內容，但猜猜是什麼？ IE用戶是付出較差性能價格的人。 – 2014-09-12 15:30:13

@ErikDahlström啊，這不適用於背景圖片。 FWIW。 – 2014-09-12 18:59:05

SVG動畫無法在IE9/IE10中使用，但可在Firefox和Chrome中使用

回答

相關問題