SVG路径命中测试

Question

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

此外，我使用jquery-svg插件来执行绘图。

下面是尝试检测路径元素上使用jQuery的鼠标悬停事件的小提琴。 Mouseover Fiddle

下面是一个尝试通过将mousemove监听器附加到svg来检测，然后使用document.getElementFromPoint进行检测的小窍门。 getElementFromPoint Fiddle

这些似乎都无法可靠地工作，特别是如果鼠标移动得很快。是否有可能使这些更敏感的更好地检测鼠标悬停？或者更好的做法呢？

Answer 1

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

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