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可以帮助您。