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。