有没有办法检查特定点（X，Y）是否在 SVG 元素中？

Question

我需要做的是了解鼠标是否离开 SVG 对象（路径，即它不是矩形 - 不能仅使用偏移，而不是圆形 - 不能使用半径和中心位置等）。我不能使用鼠标离开/进入事件，因为我有一个始终位于所有元素之上的鼠标指针。显然我也不能只使用 elementFromPoint - 因为它提供了顶层元素。

所以问题： 有没有办法了解坐标 (X,Y) 是否在特定元素 $("#element") 中。

更新：

我将我当前的代码上传到我的网站http://pekap.co/example/ 我没有创建 jsfiddle，因为我有 ebmed 的 SVG 对象。 在那里你可以找到我的 JS、我使用的 svg 对象等。

如果您转到 svg 对象，它会更改其颜色并出现指针（橙色圆圈）。目标是在我们离开/进入时更改 SVG 区域的颜色，并仅在 SVG 区域内的鼠标下显示橙色圆圈。

而目前我可以完成其中一个目标（使用不同的代码）

UPD 2。

Erik Dahlström 为我提供了几乎完美的解决方案：在 CSS 中将指针事件设置为无。我现在就去做，但是为了让我的一天更完美，如果有一种方法可以检测圆圈的任何部分何时超出 SVG 区域，那就太好了。

Answer 1

我不确定我是否理解你的意思，指针是鼠标后面的小圆圈？

如果是这样，那么只需使该圆圈具有pointer-events: none，它将对鼠标事件“透明”。请注意，webkit/safari/chrome/blink 尚不支持 mouseenter 和 mouseleave，因此您可能需要一些基于脚本的解决方法（不确定 D3 是否已经这样做了）。

还应该可以基于在路径元素上使用 CSS :hover 规则来执行解决方案。将某些属性设置为悬停时的某个值，然后使用 getComputedStyle 检查路径元素上当前设置的属性。

Answer 2

我的建议是创建该区域的图像地图，这需要大量工作，但这似乎是您需要的：http://jsfiddle.net/sb9j7/

<area shape="poly" name="dip" coords="253,102, 277,100, 280,105, 290,107, 295,111, 304,130, 290,140, 287,147, 240,157, 238,159, 227,153, 203,146, 198,125, 200,116, 214,102, 231,102" href="#">

这个小提琴来自image mapster