SVG element not receiving events in Opera and IE
html, internet-explorer, javascript, opera, svg
Solution
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/
Problem
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