SVG click events not firing/bubbling when using <use> element SVG click events not firing/bubbling when using <use> element jquery jquery

SVG click events not firing/bubbling when using <use> element


Use pointer-events: none; on the svg. It worked for me.

The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events


I had the same problem. The fix I use is to just put a transparent div over the svg. But that is not ideal of course.


I had the same problem and I used display: block or display: inline-block on the link and it worked.