SVG事件传播

Question

我有两个SVG rects，其中一个在x和y位置方面逻辑上位于另一个上面。现在，当您将鼠标悬停在顶部rect上时，我希望它下面的rect成为事件的目标。但是，如果我在顶部的矩形上，我希望它成为目标。

基于事件类型的这种不同功能使得css“指针事件”属性对我没用。

我该如何做到这一点？

Answer 1

用<g>包裹它们并在其上添加事件侦听器。您需要通过某种方式（如id属性）保留对rects的引用，并直接在事件处理程序中使用它们。你的具体案例很容易处理。

Answer 2

我不太了解SVG，但这就是我在HTML＆amp; CSS中解决它的方法：

#upper:hover + #lower { /* What happens with the lower rect when the upper is hovered */ }
#upper:active  { /* What happens if the upper is clicked/selected */ }