Useful background info

Some basic background info: In summary, when placing an svg tag in html, the correct behavior is to NOT block access to content underneath and to NOT trigger an event under any circumstance.

Clarification of the spec

The following is an attempt to clarify what the current SVG spec says.

Why the svg element should NEVER "dispatch" an event due to user interaction:

Pointer-events only affect [SVG Graphics Elements]. Other SVG elements do not visibly render on-screen; as such, pointer-events and user interaction has no meaning for non-graphical elements. You may add the pointer-events property to certain non-graphical elements (like [SVG Container Elements]) for the purposes of inheritance; however, the propery has no other effect on non-graphical elements.

In terms of [DOM Level 2 Events], this means that when using a pointer device, elements that are not part of the [SVG Graphics Elements] can never "dispatch" an Event -- and they can never be the "target" of an event. (Note that this does not prevent the use of the [dispatchEvent] function to generate an "artificial" Event; the SVG spec only dictates how Events inititated by a pointer device are to be handled.)

The rationale for all of this is that non-graphical elements do not visibly appear on-screen; and, as such, there is nothing for the user to visually interact with.

Additionally, conforming implentations should not treat non-graphical SVG elements (such as the [SVG Element]) like an invisible layer that can "dispatch" events and block/intercept interaction with items underneath.

Problems, Conflicts, and Items that are unclear

At first glance is may seem like the SVG spec is clear enough to suggest proper behavior in browsers. However, several issues complicate the spec: