SVG still receives clicks, even if pointer-events: visible/painted

Question

Basically, I have a couple .svg images put into an <img> tag on my HTML page like that:

<img src="images/corner.svg" alt="menu" class="menu" onClick="Fade();"/>

All of those images are overlapping with each other. They have the same size but different content.
I'm now trying to make only the content of those images clickable.
With pointer-events: visible; or pointer-events: painted; in CSS that seemed to be possible, but i can't get it work like that. The image still receives clicks at every point in it and not only on the content part.

I tried pointer-events: none; on the top image and that disabled clicks on the top image, which sounded like there was no mistake in the HTML or CSS code.

I created those .svg images in Illustrator CC with a transparent background, so normally there can't be content, and I exported it with the following options:

(sorry for this being in german)

I have no idea where the problem could be.

Answer 1

I've had success inlining the SVG, setting the pointer-events to none for the SVG elements, and then setting the pointer-events for the path element within the SVG to fill. Here's a CodePen example.

svg {
  cursor: pointer;
  pointer-events: none;
}

path {
  pointer-events: fill;
}

Answer 2

The problem is that you're using an <img> tag. They work like rasters even when the data is SVG i.e. the individual items don't really exist, it's just a picture which you can either have as entirey clickable or not.

If you want the drawing to be interactive you'll need to use an <object> or <iframe> tag and then you can make the individual shapes clickable or not by using the pointer-events attribute.

You could also include all the svg data inline in the html file but if you did that you'd need to make sure all the id attributes were unique.