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

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