JSFiddle - React, Tailwind, and code Playground

HTML

<svg class="container1" width="100px">
    <a class="g-node" xlink:href="#test" transform="translate(445,194)" stroke="black">
        <circle r="16.246572566634875" fill="red"></circle>
    </a>
</svg>

<svg class="container2" width="500px">
    <a class="g-node" xlink:href="#test" transform="translate(445,194)" stroke="black">
        <circle r="16.246572566634875" fill="blue"></circle>
    </a>
</svg>

CSS

.container{
    overflow: visible !important;
}