捕获被另一个透明形状阻挡的形状的鼠标悬停事件

Question

我有很多透明的重叠椭圆（如下图）。

我在鼠标悬停时突出显示每个椭圆，但不可能突出显示许多椭圆，因为其他椭圆已被绘制在它们上面。

根据我对svg的有限了解，有三种解决方案：

• 想办法只检测每个椭圆边缘的鼠标悬停。
• 使用贝塞尔曲线绘制椭圆。
• 重新排列椭圆的绘制。我不知道该怎么做，或者考虑到所有这些形状，是否有可能以这种方式解决它。

非常感谢任何帮助！

Answer 1

svg 中的目标区域只是在屏幕上绘制的任何内容。所以，理论上，你的椭圆应该只能在他们的笔划上悬停。如果不是这种情况，那么您可能会使用 none 以外的其他内容设置填充（可能是 rgba(0,0,0,0) ？）。

您还可能将悬停设置在 g 元素上而不是椭圆上。

您可以在此处查看示例：http://jsfiddle.net/r65E9/

ellipse {
  stroke: #fff;
  stroke-width: 1;
  fill: none;
}

ellipse:hover {
  stroke: #f66;
}