3

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

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

升级版：

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

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

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

UPD 2。

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

4

2 回答 2

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="#">

这个小提琴来自图像映射器

于 2013-05-15T09:26:46.540 回答
1

我不确定我是否遵循您的意思，指针是鼠标后面的小圆圈？

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

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

于 2013-05-15T11:21:27.140 回答