SVG: How to ignore pointer events on transparent parts of an image

Question

I have an SVG image map embedded on an HTML page. It contains a collection of PNG s each wrapped in a link. Some of these images overlap, however w

Answer 1

If I correctly understood you, then the click event should pass through the upper semi-transparent image to the bottom one and trigger on it.

For these purposes, the attribute pointer-events ="none"

Assigning this attribute we make the picture transparent for clicks on the red and black rectangles that are located under this picture.

Browser support: https://caniuse.com/#feat=pointer-events

Theory: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events