[whatwg] Non-blocking SVG Canvas?

Thu Aug 5 13:07:08 PDT 2010

On 8/5/10 3:36 PM, Kevin Ar18 wrote:
>
>> On 8/5/10 3:14 PM, Kevin Ar18 wrote:
>>> 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?
>>
>> Yes. See http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty
>
> Quick question, if you are familiar with it.
>
> This seems to only affect SVG objects interacting with other SVG objects (inside an SVG canvas).
>
> Does it also apply to the SVG canvas inside an HTML page? 		 	   		

This might depend on the browser, since nothing actually defines the 
interaction of SVG and HTML in this area very well.  Per SVG spec, 
pointer-events is not supposed to apply to <svg>, for example.

However in the case of Gecko specifically, the "none" value is supported 
for all elements, not just SVG elements.  So if you set 
pointer-events:none on the <svg> and then whatever values of 
pointer-events you want on its descendants, things should work.

In Opera and Webkit it looks like <svg> doesn't get events by default at 
all.  So there's no issue.  So this testcase does what you want, I 
think, in all of Opera, Webkit, Gecko.

<html xmlns="http://www.w3.org/1999/xhtml">
   <div style="position: absolute; top: 0; left: 0;
               width: 100px; height: 100px; background: green;"
        onclick="alert('s')"></div>
   <svg style="position: absolute; top: 0; left: 0;
               pointer-events: none"
        onclick="alert('t')" width="100" height="100"
        xmlns="http://www.w3.org/2000/svg">
     <circle cx="50" cy="50" r="20" fill="red"
             pointer-events="visible"></circle>
   </svg>
</html>

-Boris