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.

score 9 · Answer 1 · answered Mar 28 '15 at 15:37

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

Robert Longson · Accepted Answer · 2014-03-18T16:29:22.440

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.

edited Mar 18 '14 at 16:29

answered Mar 18 '14 at 15:43

Robert Longson

118,664
26
252
242

Or ` – CBroe Mar 18 '14 at 15:59
Okay, I changed all to ` – user3433651 Mar 18 '14 at 18:07
If works if add `pointer-events: all;`in the main HTML file, but then again the other shapes won't be clickable, because they are overlapping. – user3433651 Mar 18 '14 at 18:09
Perhaps you could create a jsfiddle so we can see where you're going wrong as it should work. – Robert Longson Mar 18 '14 at 18:22
Okay i figured something out! I've put the .svg files right into the HTML code with the ` – user3433651 Mar 19 '14 at 10:46

score 1 · Answer 3 · answered Feb 12 '21 at 23:22

1

This is what worked for me

svg {
  pointer-events:none;
}
svg *{
  pointer-events:auto;
}

don't hesitate to add !important in case it has conflict with your current style.

answered Feb 12 '21 at 23:22

4givN

2,936
2
22
51

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

3 Answers3

Linked