RE: Should the base svg tag receive events?

> However, if you are looking for guidance in the SVG spec, it is stated 
> fairly plainly. SVG is defined as a "container element" and a 
> "structural element", not as a "graphical element". The section on 
> interaction and pointer events states [1]:
Your right, I do apologize.  In my email on the whatwg mailing list I said that the issue was not clear, but then towards the end of the email I realize that is was outline very concisesly (and clearly).
 
> We will spell this out more explicitly in SVG 2. In the meantime, the 
> sections I cite above should be sufficient justification for fixing this 
> bug in any browsers with this bug. It's possible we could even clarify 
> this in SVG 1.1 2nd Edition, if that would help.
...
> All that said, I think SVG 2 should consider the various use cases 
> around this and come up with clear, consistent, and simple rules for 
> pointer events in different scenarios, so that it is more intuitive to 
> people coming from the HTML+CSS world. (Similarly, I think the SVG 
> root, and maybe container elements in general, should honor certain CSS 
> properties such as the background property.)

Thank you for confirming a number of things....  If I may inject further input/questions.  Here's what I've come up with.
 
1. Let's just say that for the purposes of our discussion, SVG has two types of elements: graphical and non-graphical.
2. Graphical elements are listed here: http://www.w3.org/TR/SVG11/intro.html#TermGraphicsElement
3. All other elements (svg, g, etc...) are non-graphical (for the purposes of this brief discussion).
 
Non-graphical elements & mouse events
4. Non-graphical elements cannot be an event target.
5. Regarding mouse events, non-graphical elements act like they do not exist. Mouse events will "fall through" non-graphical SVG elements and trigger on whatever is beneath them visually/graphically.
6. These rules do NOT effect event bubbling or capture. The only thing that is effected is which element can be an "EventTarget" (Ref: http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget )
 
Special notes about the top-most svg tag.
7. As a non-graphical element, the base (top-most) svg tag CANNOT be the "target" of an event.
 
"stand-alone, self-contained SVG document"
8a. For a "stand-alone, self-contained SVG document" the base svg tag CANNOT be the target of an event. (Example of self contained SVG: http://www.w3.org/TR/SVG11/struct.html#NewDocumentOverview )
8b. In a svg document, the "document.documentElement" == the topmost/base svg tag.
9. However, browsers/user agents still need to provide a context menu for the entire document. This might be allowed according to http://www.w3.org/TR/SVG11/interact.html#UIEventProcessing
10. I am still vague on how events can or cannot be triggered for the entire document in this case.... See my questions at the end.
 
SVG in html & other namespaces
11. SVG is it's own namespace with its own rules
12. When SVG is included in another namespace (like HTML), the HTML portion follows its rules and the SVG portion follows it's rules.
13. By this argument, consider several examples:
<html>
<div style="position:absolute; top:0px; left:0px; width:100px; height:100px; z-index:1; background-color:blue;">
</div>
<svg style="position:absolute; top:0px; left:0px; width:100px; height:100px; z-index:2;">
</svg>
A. The svg element is invisible, but technically layered on top of the div graphically.
B. Now, let us assume we attach a "click" event to every element in the document.
C. If we click at mouse pos 25,25, then we get the following:
* div = target & 1st item in bubble phase
* document = 2nd item in bubble phase
D. Notice, how svg is not the event target.
E. Even when embedded in another namespace, like HTML, svg still follows it's rules that the svg tag cannot be the "target" of an event.
 
Next example:
 
A. Let's add the following inside the svg tag from the code above:
<rect x="0" y="0" width="100" height="100" fill="black">
B. The svg element is invisible, but technically layered on top of the div graphically.
C. However, the black rect inside the SVG tag is quite visible.  It covers up the blue div.
D. Assume we have attached a "click" event to every element in the document.
E. Then, if we click at mouse pos 25,25, then we get the following:
* rect = target & 1st item in bubble phase
* svg = 2nd item in bubble phase
* document = 3nd item in bubble phase
　
-------------------
Questions
------------------
* For an SVG document, can I attach an event to the "document" node and have it apply to the entire document area? Or is document not considered a graphical element?
* Is the only way to apply an event to the entire document is to apply a base while box that covers the entire svg canvas and then add an event to that?
* What about key events?

Received on Saturday, 14 August 2010 02:13:32 UTC