有没有一种方法可以检查特定点（X，Y）是否在SVG元素中？

Question

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

所以问题来了： 是否有一种方法可以了解坐标（X,Y）是否在特定元素$("#element")中。

更新：

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

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

但是，目前我只能实现其中一个目标（任何一个都需要不同的代码）

更新2.

Erik Dahlström为我提供了几乎完美的解决方案：在CSS中将pointer-events设置为none。现在我会去做这个，但是如果有一种方法可以检测到圆的任何部分是否超出了SVG区域，那将使我的一天更完美。

- Invictus

---

你可以检查元素的边界框（.getBBox()）来解决问题吗？ - Lars Kotthoff

你有一个例子吗？最好是一个代码示例！你想要实现什么？也许有更简单的方法。 - minikomi

很不幸，我的对象不是矩形，所以我猜.getBox不适用。我将文件上传到我的网站并插入链接。希望现在更清楚了。 - Invictus

Answer 1

我的建议是创建一个区域的图像映射，这需要很多工作，但这似乎是你所需要的：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。

- Piers Blinco

---

这可能是一个解决方案，但我正在寻找更简单的东西。（请参见标记的答案） - Invictus

Answer 2

我不确定我理解您的意思，指针是跟随鼠标的小圆圈吗？

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

还可以基于在路径元素上使用CSS :hover规则的解决方案。悬停时设置某些属性的值，然后使用getComputedStyle检查路径元素当前设置的属性是什么。

- Erik Dahlström

---

哇，非常感谢，pointer-events:none; 完美解决了问题。我花了20个小时才找到这么简单的解决方案。虽然mouseenter和mouseleave在Webkit中对我有效，但你为什么说它们无效呢？我还想知道是否有一种方法可以检查小圆的部分何时离开SVG路径区域？ - Invictus

是的，非常新的 Webkit 版本支持 mouseenter/mouseleave，请参见 https://bugs.webkit.org/show_bug.cgi?id=18930 和 Chromium/Blink 的 http://code.google.com/p/chromium/issues/detail?id=236215。如果您想验证事件是否被触发，请查看例如此测试页面：http://www.quirksmode.org/dom/events/tests/mouseover.html。 - Erik Dahlström