SVG路径命中测试

SVG Path Hit-Testing

本文关键字：测试路径 SVG 更新时间：2023-09-26

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

此外，我正在使用jquery svg插件来绘制。

下面是在path元素上使用jquery mouseover事件进行检测的过程。鼠标指针

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

这两种方法似乎都不可靠，尤其是当鼠标移动得很快时。有没有可能使这两种方法中的任何一种更敏感，以更好地检测鼠标？或者也许是更好的方法？

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

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