Click events are swallowed by SVG <use> elements in IE

We’ve only managed to replicate this in Edge and <=IE11, not Chrome or Firefox. We’ve created a demo of the issue with this jsbin.

We’re using a common SVG element and linking to it with xlink:href as is common with SVG icons. When linking to the icons with a <use> tag inside an anchor, all click events on the icon will not bubble to onClick handlers on the anchor.

An example: I have a common SVG element with an icon <svg><rect id="my-icon" width="100" height="100"></rect></svg>. I then make a link containing my icon <a href="https://github.com"><svg dangerouslySetInnerHTML={{__html: '<use xlink:href="#my-icon"></use>'}}></svg></a>. As xlink:href isn’t supported by react yet, we have to use dangerouslySetInnerHTML. If we now click the SVG any onClick handlers on the anchor will not run.

A temporary workaround is setting pointer-events: none on the SVG element inside the anchor.

This might be a dupe of #1509

[matthew-dean]

Per the Stack Overflow comments, what worked for us was just to add pointer-events: none to <svg> and <use> elements.

[Shepard]

Just some interlinking for future Googlers: The bug is reported for Edge here: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/10583086/ And also talked about here: http://stackoverflow.com/questions/24078524/svg-click-events-not-firing-bubbling-when-using-use-element