This document shows the intended goal of how svg elements are to handle events when integrated into an html page.

---

Legend:
DOM = the layout of the elements in the DOM:
Orange = a graphical element
Dotted green border = able to dispatch events

Layers: assume that each element is layered on top of the other.

---

Each example shows the target element of user interaction with the webpage. By target I mean: (1) the element that dispatches the Event. (2) the element that is the target of the context menu. (3) The element that receives focus such as in text selection.

Finding the target is straightforward:

1. Look at the location of the mouse pointer.
2. Check the topmost element that is visually placed on-screen.
3. IF (the element is in the SVG namespace) AND (the element is both graphical & able to dispatch events): proceed to step 4.
   IF (the element is in another namespace, like html): follow the rules for that namespace to figure out if that element can trigger an event. CSS is rather vague on how this is handled; most browsers trigger events only if the box graphically renders content on-screen; other browsers will trigger an event on blank, no-content boxes.
   IF (no triggerable element found): go back to step 2 and check the next item visually below.
4. From the matching element, dispatch a DOM Event (this element will be the Event target under DOM2).
5. Standard DOM2 Event model takes over. For example:
   • The capture phase will go from the DOM root elment to the target element (the one that dispatched the Event).
   • The bubble phase will go from the target elment back to the DOM root element.
   • The element that actually dispatched the Event will be the DOM2 Event "target".

Notes:

The SVG element can NEVER dispatch events because it is non-graphical according to the SVG spec. See explanation in section 4 of my earlier mailing list post.
border, background-color/image are properties from the CSS spec and follow rules different than in the SVG spec. Technically they are not supposed to apply to svg elements.
If you apply a border or background to an svg element, it turns it into some graphical hybrid with undefined behavior.