Svg Not Recognising Pointer-events:none

I have a top layer with a transparent background image set and would like all pointer events to be ignored. So originally I had this set up with

&

Solution 1:

The root (top most) <svg> element will not support pointer-events: none. The reason behind this is that it's a possible security exploit, you could cover a Facebook Like button with an SVG and let clicks go through as in this example http://jsfiddle.net/rVxTn/

If the SVG element is not root then clicks should go through. This example should work on IE9 (untested)

http://jsfiddle.net/DLEsn/

However, this doesn't solve your problem, because you cant put HTML elements inside the SVG element.

I've encountered this problem multiple times before, I've had to work around it in different ways. I'd suggest you to open a new question with the actual problem (and possibly screenshots) to see how this can be worked around.

Solution 2:

Root cause

Absolutely positioned SVGs will not propagate clicks through to HTML elements in IE9.

See this webkit test case discussion: REGRESSION(r66731): pointer-events are broken in some cases, and the corresponding minimal test case. Meaning, interestingly, this bug almost made it in to WebKit, too, but got fixed in time.

In IE 9's case, the results:

IE 9.0.8112.16421 = fails test 1: floating; passes test 2: inline

Workarounds

See this StackOverflow post on simulating pointer-events: none—How to make Internet Explorer emulate pointer-events:none?

They are discussing non-SVG front elements in particular, but the technique of forwarding clicks through to the underlying elements may apply in your case as well.

Share