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