SVG路径命中测试

Question

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

另外，我使用jquery-svg插件来完成绘图。

下面是在path元素上尝试使用jquery mouseover事件进行检测的过程。Mouseover Fiddle

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

这两种方法似乎都不可靠，尤其是在鼠标移动速度很快的情况下。有没有可能让它们中的任何一个更灵敏，以更好地检测鼠标悬停？或者是一种更好的方式呢？

Answer 1

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

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