SVG element does not accept events in Opera and IE

Question

I have a webpage that has an SVG above an IMG element that needs to draw shapes above it.

Figure runs correctly in browsers. But when it comes to receiving events, the IMG actually seems to block the event / receive it (it has no event connected by itself, so it does not stop explicitly).

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

When an image is hidden using visibility or CSS: none rendering, it starts to work, but this method, of course, cannot be used.

How to place an SVG element over an IMG element so that it can receive events? (in Opera, IE9)
Thanks you

Answer 1

There are two reasons why this does not work:

1. Svg is empty.
Despite the fact that you gave it a height and width, I believe that some browsers do not assign it a real size until you add a form to it. You can get around this by placing an empty rectangle there:

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

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

Also be careful in html, this is bad because of.

Fix:

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

Answer 2

Opera and IE9 are really correct, because to fill the circle set to none . A warning is displayed in all browsers when you click on the circle. A click inside the circle hits the image because the circle's fill is transparent.

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

Sample Code / JSFiddle

From the SVG specification for event pointers :

visible

This element can be the target element for pointer events when the visibility property is set to visible, and the pointer is either internal (i.e., filling) or the perimeter (i.e., stroke) of the element. The fill and stroke values ​​do not affect event handling.

Answer 3

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

To fix this, I wrapped it just in another div: http://jsfiddle.net/UvRVX/6/

However, if you draw something in your svg, these elements will display correctly and also receive events: http://jsfiddle.net/UvRVX/7/ (click the red square gives a warning, but not along the edge).