為什麼我的 SVG 動畫在 Internet Explorer 11 中不起作用？

IE11 SVG 動畫問題已解決：了解瀏覽器支援

在給定的程式碼範例中，表示圓形的SVG 元素無法在Internet 中顯示Explorer 11，儘管動畫看起來運作正常。要了解此行為，我們需要檢查瀏覽器對 SVG 動畫的支援。

Internet Explorer 中的 SVG CSS 動畫

與現代瀏覽器不同，Internet Explorer 11 不支援 SVG CSS 動畫。完全支援 SVG 元素的 CSS 過渡和動畫，特別是針對 stroke-dasharray 屬性。這是因為 IE11 缺乏必要的渲染引擎來順利處理 SVG 轉換。

Microsoft 開發人員文檔

根據 Microsoft 的文檔，SVG CSS 轉換和動畫僅在Microsoft Edge 瀏覽器版本 10240 。這意味著 IE11 和舊版的 Edge 將無法如預期渲染 SVG 動畫。

替代動畫方法

要解決該問題並正確顯示SVG 圓圈，有有幾個選項：

• 確保筆劃屬性為目前： 在原始程式碼中，SVG 圓形元素沒有描邊屬性。將其添加到程式碼中將使圓圈可見。
• 使用 JavaScript 動畫庫： GreenSock 動畫平台 (GSAP) 等庫為 SVG 動畫提供跨瀏覽器支持，包括中風破折號轉變。在 GSAP 中使用 DrawSVGPlugin 為 SVG 元素提供了 CSS 動畫的可靠替代方案。

結論

由於其限制，IE11 不完全支援 SVG 動畫渲染能力。透過確保 SVG 元素具有必要的屬性並考慮 JavaScript 庫等替代動畫方法，開發人員可以實現 SVG 動畫的跨瀏覽器相容性。

以上是為什麼我的 SVG 動畫在 Internet Explorer 11 中不起作用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！