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

Question

以下是事实：

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

2. 在圆圈内（SVG）我绘制了四个不同圆形象限的多边形。

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

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

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

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

修改 根据要求添加了小提琴：

http://jsfiddle.net/JVQD8/

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

修改

正如Robert Longson评论的那样，Firefox中没有任何问题。 但是，在chrome中，问题如上所述，并且在IE中，SVG多边形甚至没有响应悬停。

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

Answer 1

尝试使用pointer-events属性进行试验。

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