[whatwg] Non-blocking SVG Canvas?

Thu Aug 5 12:14:26 PDT 2010

First off, let me start with a question to see if maybe I missed something somewhere:

Is it possible to create an SVG shape (say a hollow circle) that allows you to click through the invisible areas of the svg canvas to html objects underneath?

As far as I know, there is no way to do this using the HTML5 spec.  However, if I am wrong, then there is no need for the rest of this discussion.

Rationale:
One of the greatest benefits I see in SVG is the way it can potentially be used to integrate with HTML pages and affect the visual layout in new ways.  Unfortunately, the current SVG-HTML integration keeps the two quite separated.

>From my perspective, there are two features that would make SVG drastically more useful to websites:
1) The ability for SVG shapes to affect the flow and positioning of HTML elements (not just a square inserted into the the page, but the actual odd shape of SVG objects changing text borders, relative positioning of inline elements, etc... -- html currently has no such box/layout model like this).
2) The ability to overlay svg objects over certain parts of the page, but the transparent areas act like they don't exist.

The first point is too complex to deal with now.  However, the second point might be possible with minimal changes to the spec -- and, hopefully, minor changes to browsers.

Proposal:
1. Add a new property to the <svg> tag, such as: blockingcanvas="true|false" (just an example)
2. When set to non-blocking mode... any transparent areas act like they do not exist.  This particularly makes sense, when you overlay an SVG shape on top of other content on your website (usually HTML), then content in the transparent areas can be interacted with just like normal.

Problem:
1. Needed to make SVG-HTML interaction more useful
2. This might need clarification in the specs because already different browsers treat the transparent part of the svg canvas differently.  Opera has the ability to allow interaction with content beneath the transparent area (although it might be buggy).  Firefox blocks the entire transparent svg canvas even if it contains no SVG objects.

Example and further clarification:
At the end of this message is a sample page.

Anyways, in this example, the <svg> canvas hovers over the content of the page.
* In my proposal, you should be able to click on all the google links that you can see (many are underneath the svg canvas).
* As always, actual SVG objects (like the red line) would block interaction with (and visibility of) the material underneeth.

* In terms of events, "click", "mouseout", "mouseover", etc... on the red line (SVG path) would trigger an event on the SVG path only).
* In terms of events on the transparent area inside and outside the red line would trigger an event on the content underneath -- which in this case may be the document body or one of the links.

* Standard browser interaction like text selection, context menus, etc... would also be affected.

* Essentially, it would be treated like the transparent areas of the <svg> canvas do not exist and the content underneath is what is being interacted with.

* Other issues:
  How "border" style affects the svg canvas blocking/non-blocking would need clarification.

------------------------------
<?xml version="1.0"?>
<!--Credits/Copyright/Reference (Entire Document):
 http://www.whatwg.org/specs/web-apps/current-work/
 http://www.w3.org/TR/SVG11/
  http://www.w3.org/TR/SVG11/struct.html#NewDocumentOverview (copied some of the working layout from here)
 http://www.w3.org/TR/xml-names11/
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<a href="http://www.google.com/">google.com</a><br/>
<a href="http://www.google.com/">google.com</a><br/>
<a href="http://www.google.com/">google.com</a><br/>
<a href="http://www.google.com/">google.com</a><br/>
<a href="http://www.google.com/">google.com</a><br/>
<a href="http://www.google.com/">google.com</a><br/>
<a href="http://www.google.com/">google.com</a><br/>
<a href="http://www.google.com/">google.com</a><br/>
<a href="http://www.google.com/">google.com</a><br/>
<a href="http://www.google.com/">google.com</a><br/>
<a href="http://www.google.com/">google.com</a><br/>
<a href="http://www.google.com/">google.com</a><br/>
<a href="http://www.google.com/">google.com</a><br/>
<a href="http://www.google.com/">google.com</a><br/>
<a href="http://www.google.com/">google.com</a><br/>
<a href="http://www.google.com/">google.com</a><br/>
<a href="http://www.google.com/">google.com</a><br/>
<a href="http://www.google.com/">google.com</a><br/>
<a href="http://www.google.com/">google.com</a><br/>
<a href="http://www.google.com/">google.com</a><br/>
<a href="http://www.google.com/">google.com</a><br/>
<a href="http://www.google.com/">google.com</a><br/>
<a href="http://www.google.com/">google.com</a><br/>
<a href="http://www.google.com/">google.com</a><br/>
<a href="http://www.google.com/">google.com</a><br/>
<a href="http://www.google.com/">google.com</a><br/>
<a href="http://www.google.com/">google.com</a><br/>
<a href="http://www.google.com/">google.com</a><br/>

<svg style="position:absolute; top:0px; left:0px; border:1px solid black;" x="0" y="0" xmlns="http://www.w3.org/2000/svg" width="500" height="500">
 <path d="M 0,0 l 5,5 100,0 0,100 -100,0 z" stroke="red" stroke-width="5" fill="none"/>
</svg>
</body>
</html> 		 	   		  