SVG/VML vs Canvas vs HTML - Mobile

Question

我正在研究構建一個相當簡單的地圖（我可能會說100個對象），它們顯示/更改顏色並顯示另一個onclick（移動）鼠標懸停（桌面）事件目的。我正在看以下內容。

1. 帆布
2. SVG/VML
3. JS/HTML

但我的問題是，我需要以某種方式支持

1. IE（7-10）
2. 鉻
3. Firefox
4. 黑莓6-7
5. 的Windows Mobile 7（IE9）
6. 的iOS
7. Android 2.3以上版本（無SVG）

而且我似乎無法找到一個單一的系統，可以支持所有其中，Android不支持SVG，手機瀏覽器在畫布上顯得非常慢，IE 7-8不支持畫布，HTML不支持「形狀」而不使用圖片，並且需要交換圖片，這將不是很好的視覺... yada yada yada ...

有沒有任何想法我可以爲所有這些構建一次？我想這可能會更好做畫布（移動）& SVG（桌面）。但是在測試移動設備時，畫布看起來非常慢。

有什麼圖書館或系統可以幫忙嗎？

Answer 1

而且我似乎無法找到一個單一的系統，可以支持所有這些

那麼有沒有一個。

你將不得不堅持使用可移動div，否則使你的應用程序的兩個版本。抱歉。

畫布不慢，但一些手機速度很慢。畫布將（幾乎）總是比DOM更快，但它取決於你保持它的方式。你測試的代碼是什麼？

Answer 2

您可能會採用的方法之一是創建一個應用程序用來繪製內容的接口，然後有兩個不同的渲染器對象，一個用於使用SVG的IE7〜8，另一個使用Canvas進行其他操作。

Answer 3

1. 如果你需要IE7-8那麼你必須使用VML，它只支持圖形模式那裏。
2. 如果您考慮使用iOS，那麼您必須使用Canvas，它在iPad上的速度至少比SVG快10倍。
3. Canvas是默認的Android 2.x瀏覽器中唯一可用的圖形mdoe。
4. 如果您需要瀏覽器支持的縮放和地圖大小超過3000px，那麼Canvas不起作用，您必須使用SVG。