html - 带有鼠标悬停的 HTML5 复杂形状

Question

有谁知道谷歌是如何在 Youtube 的分析部分创建地图数据的？

鼠标悬停在正确的位置，即当您的鼠标离开美国进入加拿大时，加拿大是焦点。我对 HTML 的了解告诉我，浏览器只能识别方形，如果你想制作一个非常复杂的形状，你必须编写很多代码。

例如，主页图标中的左斜面不会拾取鼠标事件 p.walkleftstudios.com/am2.1 使用 HTML5 画布和一点三角函数完成。

例如，在这个例子中，我完全忽略了它（画布太烦人了）p.walkleftstudios.com/am2.2

我在代码中看到了一个 SVG 标签，这可能就是魔法发生的地方

Answer 1

大多数 Google 产品都使用 GViz 进行数据可视化。如果你想根据数据输入来绘制地图图表，有它的API。

https://developers.google.com/chart/interactive/docs/reference

对于旧版 IE 浏览器，GViz 输出为 SVG 或 VML，因此您的图表可以在任何地方工作 - 旧版、新版、桌面和移动浏览器。

Answer 2

我相信您正在寻找的是图像地图。