javascript - 如何制作重叠的可悬停和可点击的图像？

Question

我正在研究一个人体模型，它有特定的器官需要突出显示并在悬停时出现在顶部并且可以点击。困难的部分，例如:肺部与心脏重叠，如何在不将心脏放在肺部顶部的情况下使心脏可点击？

我尝试使用透明的 SVG，但也无法使它们正常工作。

谢谢!

Answer 1

您需要一种“ HitTest ”机制。它是这样工作的:

1. 在 JS 结构中保持形状的轮廓
2. 让图形上的单个表面接收所有鼠标点击事件
3. 当表面被点击时，使用传递的坐标找出在 (1) 中哪个形状被击中

---

或者，将图形转换为矢量将提供此功能 out of the box ，但增加了可缩放图形的优势。这样做的缺点是:旧浏览器和生成矢量的处理增加。