[CSS3-UI] Still uncertain how to handle pointer-events for the top svg tag.

Note: please forward any replies to both public-fx@w3.org & www-style@w3.org if possible (as requested by someone else).


Summary of problem:
There is still disagreement on whether the top svg tag in html/css should trigger pointer-events.

CSS-SVG Task Force says it should not: http://dev.w3.org/csswg/css3-ui/#pointer-events
CSS3-UI says it should: http://wiki.csswg.org/spec/css3-ui#issue-5

So, there are at least two opposing views on the correct way to handle this issue.  It is not my decision to say which way it should be done, but it would be nice to get the question settled by all parties... and have all browsers handle it the same way. :)

To help things along, I included the following bits of info.

I. Why is this useful?
II.  Any solution should meet several requirements (they are listed below).
III. A summary of the 2 different views.



I. Why is this useful?
For anyone new to the discussion, the ability to integrated SVG and HTML, presents some interesting possibilities 
for future websites. Consider the following: 
Using SVG to circle text or html items on a wepage (but still allow those items to be interacted with). 
Drawing arrows from one part of the page to the other (but not block content 
underneath). 
Having oddly shaped menus, borders, layers, etc.... 
Adding a "hazy" or semi-tranparent layer over parts of the page, yet still be able 
to interact with the html object(s) underneath. 
Creating a graphical object "under" the cursor that follows the mouse, but 
still lets you interact with items underneath it. You can view some examples of this here: http://lists.w3.org/Archives/Public/public-fx/2010JulSep/att-0084/Results.zip  -- see index.html & example.xhtml in that file


II. Any solution should probably meet these basic requirements:
1. There MUST be a way for the svg tag to not receive pointer-events, while still allowing all it's child nodes to continue receiving pointer-events.
2. There MUST be a way to force the svg tag to receive pointer-events within it's entire rectangular area (the area defined by width & height).
3. Address whether embed, img, svg, and any other forms of inserting svg should act differently for pointer-events.
4. Make sure these can be implemented the same way all browsers.


III. A summary of the two different solutions.
Consider the following code:

<body onclick="alert(Event.target)">

  <svg id="svg1" width="500" height="500">

    <rect x="20" y="20" width="100" height="100" fill="black" />
    <svg id="svg2" x="450" y="450" width="10" height="10"></svg>
  </svg>

</body>



A. Perspective A - all svg tags do not trigger events

1. If you click within the 500x500 "#svg1" area, but not the black rectangle, the pointer-event target will "fall through" to the body.
2. If you click on "#svg2", the result will be the same: the pointer-event target will "fall through" to the body.
3. If you add any of the following pointer-events: boundingBox, visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke, all, none ... to the svg tags, the pointer-event target still falls through to the body [ref]

Rationale:
* This perspective is based on the idea that you want svg to be more than just an image, but an integral part of making html pages -- to enhance the design of websites.
* This perspective is also based on the idea that svg is now a part of the same DOM as the rest of the html page and maybe should not be treated as a separate foreign object like embed or images are.  (Note: this probably also means svg may act differently than image or embed.)

Meeting the 4 requirements:
1. Met by default
2. The addition of a "boundingBox" property could allow this.  Note that this does make things a little more verbose for the developer.  You must first, set "boundingBox" for the topmost svg tag and then disable "boundingBox" for all it's children to get SVG to work normal.
3. It would seem this method would only apply to svg and not image or embed?
4. ?


B. Perspective B - top svg tag triggers events & blocks content underneath
1. If you click on the invisible area of the 500x500 svg tag, then the pointer-event target will be #svg1.
2. If you click on "#svg2", the pointer event will "fall through" to the "svg1" tag underneath.  Thus, the target of the pointer-event will be the topmost svg tag (#svg1).
3. CSS will override the default behavior of the svg tag and force #svg1 to always receive pointer-events, even when it has the following pointer-events properties: boundingBox, visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke, all

Rationale:
* It is easy to lean towards this view when you see how CSS handles other material like images, embed, etc....
* This treats img, embed, svg, and other content the same, which makes the spec a little simpler.

Meeting the 4 requirements:
1. Add pointer-events="none" to the svg tag.  Note: this makes things a little more complicated for the developer.  You must first set "none" for the topmost svg and then reset all children back to their default "visiblePainted".
2. Met by default.
3. img, embed, svg ... all the same way
4. ?

Received on Friday, 19 November 2010 01:13:41 UTC