SVG Still Receives Clicks, Even If Pointer-events: Visible/painted

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

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

Solution 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.

Solution 3:

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.