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>                                           

Reply via email to