裁剪的 SVG 多边形接收鼠标事件

Posted 2023-03-23

【中文标题】裁剪的 SVG 多边形接收鼠标事件

【英文标题】：Clipped SVG polygon receives mouse events

【发布时间】：2014-04-24 03:09:41

【问题描述】：

以下是事实：

我有一个带圆角的 div，其中包含一个带圆角的 SVG 元素，可以创建一个圆。

在圆形 (SVG) 内部，我正在绘制四个多边形，它们构成不同的圆形象限。

多边形通过改变颜色来响应悬停 - 因此当用户鼠标悬停在圆圈中的特定象限上时 - 它会亮起。

SVG 和包含 SVG 的 div 都具有 overflow:hidden CSS 指令。

当我将鼠标悬停在圆外的区域（但在多边形的剪裁矩形内）时，相应的象限会亮起...

为什么即使我将鼠标悬停在剪切区域上，元素也会响应鼠标悬停？ 我怎样才能确保这不会发生？ （不创建遮挡透明元素 - 我希望能够在下面的图层中触摸某些东西......）。

编辑： 按要求添加小提琴：

http://jsfiddle.net/JVQD8/

在小提琴中 - 请注意周围的 div 以红线为边界。 多边形（蓝色）被红色边框（div）剪裁，当您将鼠标悬停在多边形上时，它会变成较浅的蓝色阴影。 如果在多边形上，多边形会在红色圆圈边框区域之外突出显示。

编辑：

正如 Robert Longson 所说，Firefox 完全没有问题。 然而，在 chrome 中，问题如前所述，而在 IE 中，SVG 多边形甚至没有响应悬停。

所以关于 chrome 的问题仍然存在 - 仅在 chrome 中。我怎么知道这是我应该报告的错误，还是设计的行为差异？

【问题讨论】：

您能准备一个fiddle 来展示这种行为吗？

似乎在 Firefox 上按预期工作。你在测试什么UA？也许这是那个 UA 的错误？

确实它在 Firefox 上按预期工作。

现在在 Chrome 中可以正常工作，但在 Safari 9.1 中却不能。

【参考方案1】：

尝试使用指针事件属性。

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pointer-events

【讨论】：

试过了。指针事件属性（如您指向的链接中所指定）是指（整个元素的）可见性填充和描边。它不处理剪辑。所描述的问题是多边形被父级裁剪，但响应裁剪区域中的事件。