[whatwg] Non-blocking SVG Canvas?
bzbarsky at MIT.EDU
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.
<div style="position: absolute; top: 0; left: 0;
width: 100px; height: 100px; background: green;"
<svg style="position: absolute; top: 0; left: 0;
onclick="alert('t')" width="100" height="100"
<circle cx="50" cy="50" r="20" fill="red"
More information about the whatwg