svg 和 canvas在移動端的兼容性如何？尤其是在動畫方面。謝謝！？

01-12

兼容性 http://caniuse.com

動畫的話不論dom、canvas還是svg基本原理都一樣，動畫是關於時間的函數，沒有絕對的好壞，看使用場景

蟹妖，只能說下canvas，因為直接SVG我用過沒幾次。

3D方面我沒用過，2D方面基本上沒有什麼問題。我個人猜想，drawText是比較有可能兼容性問題的地方，不過回想下來，目前為止，我竟然沒怎麼用過這個API，於是也說不上來了。

至於動畫，援引月影大大的回答，動畫是關於時間的函數。SVG是有原生動畫的，canvas需要自己繪製每一幀來實現動畫，當然現在也有一些「面向對象」的canvas庫，裡面帶了動畫的功能。

兼容性：

svg：基本的svg在移動端的兼容性還是很不錯的，但是像svg濾鏡、標籤動畫等這些功能目前在國內環境上還不是非常樂觀，並且在有些瀏覽器上只支持通過matrix的方式來設置svg的變換操作。

canvas：api的支持已經是非常不錯的了，各大廠商也早都實現了canvas的硬體加速機制。除非你遇到了老式的webview，不然canvas你是可以玩的很開心的。

動畫上：

svg：並不適合用來做有大量物體元素運動的動畫，它的優勢是矢量形狀和線條操作，類似這個demo分享快樂128年。並且因為目前很多瀏覽器還沒給svg實現硬體加速（或者說不好實現），所以動畫性能並不是非常好。

canvas：在目前來看在移動端利用2d放射變換來實現的動畫比較實惠的還是canvas 2d了。在大部分機型上canvas都能獲得更好的渲染性能（在硬體加速情況下，瀏覽器會將繪圖命令切換成gpu硬體來執行），並且現在的硬體加速支持程度也比較好。所以如果需要運動的物體多的話建議用canvas，感興趣可以看看這個庫jasonChen1982/jcc2d（內置了canvas 2d渲染引擎和高性能的動畫引擎），非常簡單方便。

在兼容性方面：

canvas 支持現在基本所有的移動端瀏覽器；

svg 在 android 4.4 的瀏覽器以下支持部分API，其他也是基本全支持的，總體來說，兼容性是很不錯的了；

移動端可以大膽放心的使用了 canvas 或者 svg 了。

在動畫方面：

canvas 的動畫其實是逐幀渲染的，因為每一次繪製其實都是一個靜態的，通過不斷的計算和rerender，來實現動效，一般我們使用 requestAnimationFrame 來優化渲染的頻率，對於不支持的瀏覽器可以間隔性調用 setTimeout 來計算和rerender，一般會把幀率控制在 60幀/1s，來達到一個流暢的效果，但是有可能由於計算量比較大，或者機器性能差，導致出現阻塞的情況，出現動畫掉幀，這方面可以在計算上作演算法的優化，或者可以計算放到 Web Workers 來處理，以達到不阻塞頁面主進程的目的；

而 svg 其實和我們傳統的 dom 動畫類似，他支持類似 css 中的 transform 、transition 等等來實現動畫，也可以通過 js 獲取 svg 節點來改變 style 屬性來實現動畫，總體來說還是和傳統的 dom 實現動畫思路較為一致。

至於選擇的話，其實是各有優點，也是需要看實際的使用場景的，比如需要實現一個小遊戲，那還是 canvas 來的更為適合，如果說實現一些數據圖表繪製，個人還是偏愛 svg。

當然在動畫方面還有 webgl 等選擇，在優化和功能上都是更加高級的，比如 3D 、 VR 等方面。

動畫canvas比較合適，一般圖形展示之類的可以考慮svg。svg還一點比較優秀，你可以像操作dom一樣操作節點…

硬體加速的支持度兩個差不多。