SVG still receives clicks, even if pointer-events:

问题:

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) picture of SVG settings http://s14.directupload.net/images/140318/reurfvoo.png

I have no idea where the problem could be.

回答1:

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.

回答2:

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;
}