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

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;
}