JSFiddle - React, Tailwind, and code Playground

HTML

<svg>
    <circle id="c1" cx="50" cy="50" r="40" fill="lime" />
    <rect id="r1" x="4" y="20" width="200" height="50" fill="cyan" />
    <circle id="c2" cx="70" cy="70" r="50" fill="fuchsia" />
    <use id="use" xlink:href="#c1" />
</svg>

CSS

svg {
    width: 100%;
    height: 100%;
    stroke: black;
    stroke-width:2px;
    pointer-events: all;
}

JavaScript

document.documentElement.addEventListener("click",
clickHandler,
false);

function clickHandler(evt) {
    var newtarget = evt.target || event.target;
    var topmost = document.getElementById("use");
    topmost.setAttributeNS("http://www.w3.org/1999/xlink",
        "xlink:href",
        "#" + newtarget.id);
}