SVG 路径命中测试

Question

我在检测 SVG 路径元素上的鼠标悬停事件时遇到问题。似乎路径元素的 strokeWidth 越小，检测鼠标悬停的成功率就越低。

另外，我正在使用 jquery-svg 插件进行绘图。

下面是尝试在路径元素上使用 jquery mouseover 事件检测的小提琴。 Mouseover Fiddle

下面是尝试通过将 mousemove 侦听器附加到 svg，然后使用 document.getElementFromPoint 来进行检测。 getElementFromPoint Fiddle

这些似乎都不能可靠地工作，尤其是在鼠标快速移动的情况下。是否可以使这些中的任何一个更敏感以更好地检测鼠标悬停？或者也许有更好的方法？

Answer 1

浏览器的工作方式是，您不会连续收到mouseover 事件，但每次操作系统更新光标位置时您都会收到一个。如果鼠标移动得很快，你会得到一个相隔几个像素的事件。鼠标不会在文档上滑动，而是跳跃。 Here's a jsfiddle 显示每个事件发生的位置。您无法为光标的两个连续位置之间的所有元素获取 mouseover 事件。

您可以做一些不同的事情：记住mousemove 事件的先前位置，计算该点与当前鼠标位置之间的线，并计算该线与文档中所有其他形状之间的所有交点。但这将是资源密集型的，因为没有可用的 API，您必须自己计算交叉点。有一个library可以帮助你。