html - SVG/VML vs Canvas vs HTML - 移动

Question

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

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

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

1. 即（7-10）
2. 铬合金
3. 火狐
4. 黑莓 6-7
5. 视窗移动 7 (IE9)
6. iOS
7. Android 2.3+（无 svg）

而且我似乎找不到可以支持所有这些的单一系统，Android 不支持 SVG，移动浏览器使用画布似乎很慢，IE 7-8 不支持画布，HTML 不支持“形状”不使用图像，并且需要交换图像，这在视觉上不是很好...... yada yada yada ...

有什么想法我可以为所有这些构建一次吗？我在想画布（移动）和 SVG（桌面）可能会更好。但是在测试移动设备时，画布似乎非常慢。

是否有任何图书馆或系统可以提供帮助？

Answer 1

而且我似乎找不到可以支持所有这些的单一系统

嗯，没有。

你将不得不坚持使用可移动的 div 或者制作你的应用程序的两个版本。对不起。

画布并不慢，但有些手机很慢。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 用于其他所有内容。