SVG Event Propagation

Question

У меня есть два SVG-ректа, где один логически лежит поверх другого с точки зрения x и y позиции. Теперь, когда вы наводите курсор на верхний прямоугольник, я хочу, чтобы прямоугольник под ним был целью события. Но если я наведусь на верхний прямоугольник, я хочу, чтобы он был целью.

Эта другая функциональность, основанная на типе события, делает свойство css "pointer-event" бесполезным для меня.

Как мне это сделать?

Answer 1

Оберните их <g> и добавьте в них прослушиватели событий. Вам нужно каким-то образом сохранять ссылки на ссылки (например, свойство id) и использовать их непосредственно в обработчиках событий. Ваш конкретный случай довольно прост в обращении.

Answer 2

Я мало знаю SVG, но вот как бы я решил это в HTML и 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 */ }