RE: Scope of pointer-events in SVG inline in HTML

Correction: apparently the version of #2 below must have had a previous
version cached in my tests:

 

The outcome is much better than reported and should read as follows:

In number 2, I've used pointer-events defined in the HTML's CSS to give the
SVG pointer-events="none" (while trying to preserve the opacity of the
pointer-events on the oval). In all browsers it works the same way: the
mouseclicks on the transparent rectanble go through to the content of the
iframe, but not the mouseclicks on the oval*.

 

The question still remains of why SVG's pointer-events are overridden by the
HTML context.

 

Cheers

D

 

From: David Dailey [mailto:ddailey@zoominternet.net] 
Sent: Sunday, March 23, 2014 8:36 AM
To: 'www-svg'
Subject: Scope of pointer-events in SVG inline in HTML

 

Hi, 

 

I have a series of experiments here in which most browsers (except Opera
12.16-though I haven't tried newer Opera) do not behave as I would hope:

 

1.       http://cs.sru.edu/~ddailey/fading/slides/SVGoverIframe.htm

2.       http://cs.sru.edu/~ddailey/fading/slides/SVGoverIframe2.htm

3.       http://cs.sru.edu/~ddailey/fading/slides/SVGoverIframe3.htm

4.       http://cs.sru.edu/~ddailey/fading/slides/SVGoverIframe4.htm

 

In all, there is an SVG element atop an i-frame. The iframe contains either
SVG or HTML, depending on user's selection. The topmost SVG contains an
oscillating oval (actually a circle stretched into an oval) atop a
transparent rectangle. I would expect mouse events over the rectangle, and
not the oval, to "reach through" to the iframe below, triggering events
there. That is what happens in the first example, in Opera, but not in
Chrome, Safari, FF or IE.

 

In number 2, I've used pointer-events defined in the HTML's CSS to give the
SVG pointer-events="none" (while trying to preserve the opacity of the
pointer-events on the oval). In all browsers it works the same way: the
mouseclicks go through to the content of the iframe, even, alas, passing
through the oval.

 

In number 3, I tried removing pointer-events on the rectangle, hoping that
mouse events would percolate down into the i-frame, but to no avail.

 

In number 4, I tried using an SVG value of the pointer-events attribute:
pointer-events="visiblePainted"  (from SVG2's Interactivity draft [1]) to
allow mouseclicks to reach under the SVG on all but the oval, but to no
avail.

 

It seems as though, in most browsers, the top SVG has only global
pointer-events that can either be assigned or withdrawn, while one would
hope the SVG's own painting and pointing rules would apply, as was the case
in Opera 12.16. My expectation is clearly how Opera 12.16 handles it, though
I could see an argument to let HTML assign a global pointer-events to the
whole SVG, provided that parts of that SVG can be made invisible while
allowing others to remain visible to events.

 

Cheers

David

 

[1] https://svgwg.org/svg2-draft/interact.html#PointerEventsProp