SVG element not receiving events in Opera and IE

Question

I have a webpage where there is SVG above IMG element that should draw shapes over it.

The drawing is executed correctly across browsers. But when it comes to receiving events, the IMG actually seems to block the event/receive it instead (it does not have any event attached by itself so it not being stopped explicitly).

Example:
http://jsfiddle.net/UvRVX/12/ (fixed markup, added circle) FF, Chrome: "svg received mousedown" (correct)
Opera, IE9: -nothing- (incorrect)

When the image is hidden via CSS visibility or display: none, it starts to work, but this way of course cannot be used.

How to place SVG element above IMG element so it can receive events? (in Opera, IE9)
Thank you

Fennelly

Answer 1

There are 2 causes to why this doesn't work:

1. The svg is empty.
Even though you gave it a height and width, I believe that some browsers don't assign it a real size until you actuall add a shape to it. You can get around this by placing an empty rect there:

<rect x="0" y="0" width="300" height="300" stroke="black" stroke-width="0" fill="none"></rect>

2. Because of the pointer-events property. You can read more here. By default, it's value is visiblePainted, so I really don't know why Chrome and FF allow the events to get through. You need to set this to "all"

Also be carefull at the html, it's badly fromatted.

Fix:

http://jsfiddle.net/mihaifm/ptLrB/2/

Midshipmite

The fiddle works for me in IE9 and Opera. Where did you test? – Midshipmite

Yes, the linked fiddle works (in Opera for me). But not without the fullsize-hidden-rectangle. So, I fear, the pointer-events attribute alone is useless - I had hoped it would be enough to receive the events in an empty <svg>. – Misbegotten

Yeah, probably it's passed down to the shapes. – Midshipmite

Answer 2

Opera and IE9 actually are correct because the circle's fill is set to none. The alert displays in all the browsers when you click on the circle's stroke. Clicking inside the circle hits the image since the circle's fill is transparent.

Add pointer-events="visible" to the circle to ignore the value of the circle's fill.

Sample code / JSFiddle

From the SVG spec for pointer-events:

visible

The given element can be the target element for pointer events when the ‘visibility’ property is set to visible and the pointer is over either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the ‘fill’ and ‘stroke’ do not affect event processing.

Pareto

Answer 3

Interesting bug. Non-html-elements (here: <svg>) seem to behave incorrectly when it comes to z-index css values.

To fix it I've wrapped it simply in another div: http://jsfiddle.net/UvRVX/6/

Yet, if you draw something in your svg, these elements will be correctly displayed and also receive events: http://jsfiddle.net/UvRVX/7/ (click in the red square gives an alert, but not in the margin around).

Misbegotten