HTML5 中的交互式平面图 [关闭]

我必须为公寓楼开发交互式平面图导航器和查看器，它将继承其基于 Flash 的前身。

我现在正在评估最适合在 HTML5 中实现这一点的技巧和技术。 我必须支持所有常见的浏览器（IE 以 7 开头）。

要求：

• 用户会看到建筑物的几个静态室外视图，他可以使用简单的小部件在这些视图之间进行切换。
• 他们将能够在此外部视图中选择楼层。鼠标悬停时（点击触摸设备）地板将突出显示。
• 单击楼层后，您会切换到平面图，再次将鼠标悬停/单击时，该平面图会提供有关公寓的详细信息。
• 应该涉及一些动画，但不要太花哨。

我一直在考虑实现这一目标的选项。 我还需要一种快速的方法来选择楼层（概述）和公寓（平面图）的多边形，以允许非开发商创建新建筑。

我想出的选项：

1. 使用纯图像和图像地图进行中途停留。
2. 使用canvas（利用Google针对不支持的浏览器的Javascript解决方案）。将图像加载到画布标签中并动态创建停留。
3. Use SVG

跨浏览器兼容性的最佳选择是什么？

SVG 或 Canvas 都可以满足您的需求。您可能会更轻松地在 SVG 中进行开发，因为已经为您完成了很多工作。

以下是一些其他注意事项：

• Canvas 适用于所有“现代”浏览器，但不适用于 IE7/8
• SVG 适用于所有现代浏览器，VML（非常接近）适用于 IE7/8
• 现在，Canvas 中的文本渲染在每个浏览器上看起来可能有很大不同
• Canvas 在一定程度上可以在 Android 和 iOS 上运行（像文本渐变这样的小事情仍然会搞砸）
• SVG 不能在 android 中工作（至少一年前不能。有什么改变吗？）它可以在 iOS 中工作
• SVG 的可访问性是FAR更好的。文本是可搜索的，因此对 SEO 友好、盲人友好、复制粘贴友好等。与 DOM 的其余部分交互更加自然。
• Canvas 性能更好，但您不需要它。

目前，除了旧版本的 IE 之外，它们在兼容性方面相当相同。你可以使用 excanvas 库让它们与 Canvas 一起工作，但这有点糟糕，特别是如果有东西要移动的话。

我推荐 SVG 只是因为您将能够更快地为平面图类型的应用程序开发它。一切都已经是 DOM 对象了。事件、鼠标处理等都已经为您完成。

但如果你真的希望它能在（较旧的？）Android 手机上运行，​​Canvas 可能是目前更好的选择。