SVG Event Propagation

Question

I have two SVG rects, where one is logically on top of the other in terms of x and y position. Now, when you hover over the top rect, I want the rect underneath it to be the target of the event. But if I mousedown on the top rect, I want it to be the target.

This different functionality based on event type is what makes the css "pointer-event" property not useful to me.

How can I accomplish this?

Answer 1

I don't know SVG much but this is how I would solve it in 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 */ }

Answer 2

Wrap them with a <g> and add event listeners on it. You need to keep references to the rects by some means (like id property) and use those directly in the event handlers. Your specififc case is quite easy to handle this way.