如何檢測SVG動畫是否可用

是否有檢測SVG動畫是否可用的好方法，然後適當調整DOM？如何檢測SVG動畫是否可用

我正在使用animateMotion爲包含image s的g的動畫製作動畫。這隻適用於Mozilla;更糟糕的是，animateMotion未啓動會將圖像保留在Mozilla和WebKit中的不同位置（但不是每個位置都有相同的位置）。

看來我需要一種方法來調整g和圖像的屬性來處理每個場景，並且只有在它能夠工作時才添加animateMotion標記。有什麼建議麼？

來源

2011-04-10 Marcin

Modernizr只檢測高級功能的存在，並相信瀏覽器不會撒謊。例如，桌面Safari對Modernizr的SMIL有很大的「是」。但是SMIL只是在幾乎每個瀏覽器（甚至是Firefox 4！）中都部分實現，並且您必須測試每個單獨的屬性動畫以確定哪個是正在工作或不工作。

例如，您無法使用SMIL爲Desktop Safari中的路徑動畫上的文本設置startOffset的動畫效果。沒有類似這樣的東西來檢測特徵存在的庫。

恕我直言，他們存在的地方，你應該使用CSS轉換/動畫爲除IE以外的其他一切通用動畫。對於IE，請使用Javascript（或Canvas）動畫。

（順便說一句，animateTransform在Chrome壞了 - 這算錯譯文）

來源

2011-04-11 19:06:13

Modernizr檢測到對SVG動畫（SMIL）的支持。

沒有完整的例子，無法確定是什麼導致了這些差異。

來源

2011-04-10 10:54:56

我剛剛與三星手機運行的是Android 4.2.2這個問題。它會報告所有這三個：Modernizr.svg, Modernizr.svgclippaths, Modernizr.smil，但沒有動畫和剪輯路徑混亂。它看起來像只有一個元素可以有一個剪輯路徑。無論如何，我們結束了這個不那麼偉大的分辨率：

isAndroid = /Android/.test(navigator.userAgent);

對不起，Android用戶，你只會看到備份圖像。這是一個可怕的修復，但它只是一個簡單的標誌動畫，所以...

來源

2014-05-02 15:53:58 Jase

如何檢測SVG動畫是否可用

回答

相關問題