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

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/

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.