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

The SVG spec explicitly states that fully transparent pixels in a raster image should not cause a click event if pointer-events="visiblePainted" (the default) or pointer-events="painted.

Unfortunately, however, Chrome, Firefox, and Edge all seem to treat bitmap images as completely opaque.

If you want to encourage this to be fixed, you could star the following bug tickets:

https://bugzilla.mozilla.org/show_bug.cgi?id=311942 https://bugs.chromium.org/p/chromium/issues/detail?id=806468

AFAIK, the only solution to this right now is to use a clip path.

function click(evt) {
  console.log("Clicked on " + evt.target.parentElement.id);
}

document.getElementById("blue").addEventListener("click", click);
document.getElementById("red").addEventListener("click", click);