SVG/VML vs Canvas vs HTML - 移动

Question

我正在考虑构建一个相当简单的地图（我会说可能有 100 个对象），该地图显示/更改了颜色，并具有显示另一个对象的 onclick（移动）鼠标悬停（桌面）事件。我正在查看以下内容。

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

但我的问题是我需要以某种方式支持

1. IE (7-10)
2. 铬
3. 火狐
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 或制作两个版本的应用。对不起。

Canvas 并不慢，但有些移动设备很慢。 Canvas 将（几乎）总是比 DOM 快，但保持这种方式取决于您。你到底在测试什么代码？

Answer 2

1. 如果你需要IE7-8那么你必须使用VML，它只支持图形模式。
2. 如果您考虑 iOS，那么您必须使用 Canvas，它在 iPad 上的速度至少比 SVG 快 10 倍。
3. Canvas 是仅在默认 Android 2.x 浏览器上可用的图形 mdoe。
4. 如果您需要浏览器支持的缩放并且地图的大小超过 3000 像素，则 Canvas 无法使用，您必须使用 SVG。

Answer 3

您可以解决此问题的一种方法是创建一个您的应用程序用来绘制内容的界面，然后有两个不同的渲染器对象，一个用于 IE7~8 使用 SVG，一个使用 Canvas 用于其他所有内容。