How to make an SVG text element “click-through-abl

Question

I have a map with SVG text elements to name the locations. I want the locations (shapes) to be clickable, and they are, but because the text elements are on top of them, if someone hovers over a text element and clicks, then nothing happens because the shape was not clicked : the text element was. How can I make it so that if the text element is clicked, the click goes "through" it and to the shape ?

Answer 1

Mozilla introduced a CSS property for this purpose called pointer-events. It was originally limited to SVG shapes, but is now supported on most DOM elements in modern browsers:

span.label { pointer-events: none; }

• https://developer.mozilla.org/en-US/docs/CSS/pointer-events
• http://caniuse.com/pointer-events

The answer to this question has some good information on achieving the same result in old IE:

css 'pointer-events' property alternative for IE

Answer 2

add this css to the text:

pointer-events: none;

Answer 3

If it is possible to group the map shapes with the text inside of a "<g>" element, then you can attach the click to the group rather than the shape. Doing this also gives the added benefit of transforms applied to the group will apply to both the shape and the text. If grouping is not possible, then I agree the previous answer is definitely your best shot. Essentially what is happening is this: most people visualize a click penetrating downward through your z-index, but it doesn't work that way. The click bubbles up through the DOM, so if the text doesn't handle the click, it bubbles up to the next DOM element which is the parent group or container. This continues upward until it reaches the topmost DOM element.