Empty and non-clickable filling of SVG paths in SV

Question

I am doing a modiciation of SVG-edit which is an online SVG-editor: https://code.google.com/p/svg-edit/

I allow my users to draw shapes only with fillings set to "none".

However now i want when my users draw these shapes, to allow them to hover over the shapes and display some information about them. When the shapes are "behind" some other shapes, althought they are visible because the filling is set to none, they are unclickable because the filling of the top shape is practically there but its just invinsible.

Is there any way of making the shapes filling "click-transparent" apart from only visually transparent?

Answer 1

Control over what parts of shapes react to mouse events is available via the pointer-events property.

Answer 2

Yes, there is a way:

In css add to your svg pointer-events: none; and to the polygons or paths inside set pointer-events: fill, this makes transparent the empty space, but not the filled shapes, I made an example in codepen:

http://codepen.io/jesuscmd/pen/EyEyoP