帶鼠標懸停的HTML5複雜形狀

Question

有誰知道Google如何在Youtube分析部分創建地圖數據嗎？

鼠標懸停在正確的位置，即當你的鼠標離開美國進入加拿大時，加拿大是重點關注的對象。我對HTML的瞭解告訴我，瀏覽器只能識別正方形，如果你想要製作一個非常複雜的形狀，你必須編寫很多代碼。

例如，主圖標中的左斜面不會拾取鼠標事件p.walkleftstudios.com/am2.1 使用HTML5畫布和一些三角函數完成。

例如，在這個例子中，我徹底離開了這一點（畫布是太煩人了一起工作）p.walkleftstudios.com/am2.2

我見過的代碼的SVG標籤，這可能是魔術發生的地方

Answer 1

我相信你在找什麼是image maps。

Answer 2

大多數Google產品使用GViz進行數據可視化。如果您想根據數據輸入繪製地圖，則有API。

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

GViz輸出爲SVG或VML對於上了年紀的IE瀏覽器，所以您的圖表將工作無處不在 - 舊的，新的桌面和移動瀏覽器。