CODEWITHSUNDEEP
jquerycsssvg
Jitender
Jitender

Reputation: 7969

SVG element overlapping previous sibling SVGs

I have multiple SVGs positioned around the circle. The problem is every SVG is overlapping its previous sibling SVG which is causing click event to fire in the wrong shape. Technically it is right but from the user perspective, it is wrong.

Upvotes: 0

Views: 171

Answers (1)

ccprog
ccprog

Reputation: 21821

You can disable the capturing of click events in the .shapes div (which turn out to be the culprit), and only capture the events from svg children:

.shapes {
  pointer-events: none;
}
.shapes svg * {
  pointer-events: painted;
}

The click event still bubbles through the <svg>, and so the delegate event listener still works without change.

Upvotes: 1

Related Questions