Geek Answers Handbook

SVG still gets clicks, even if event pointers: visible / colored

Basically, I have a couple of .svg images placed in a tag <img>on my HTML page, for example:

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

All these images overlap with each other. They have the same size but different content.
Now I'm trying to make only the contents of these images clickable.
With pointer-events: visible;or pointer-events: painted;in CSS, which seemed possible, but I can't get it to work like that. The image still gets clicks at every point in it, not just part of the content.

I tried pointer-events: none;on the upper image, and this disabled click on the upper image, which sounded like there was no error in the HTML or CSS code.

I created these .svg images in Illustrator CC with a transparent background, so usually there can be no content, and I exported it with the following options:

(sorry for this, being in German) SVG settings image http://s14.directupload.net/images/140318/reurfvoo.png

I do not know where the problem is.

+3
source share
2 answers

The problem is that you are using a tag <img>. They work like rasters, even when SVG data, i.e. Individual elements do not actually exist, it is just an image that you can either have as a whole with a mouse click or not.

, , <object> <iframe>, , -.

svg inline html , , , id .

+1

, SVG, - none SVG, - SVG. CodePen.

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

path {
  pointer-events: fill;
}
+5

More articles:


All Articles