JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="svg1" width="200" height="200">
    <defs>
        <clipPath id="nodeclipper">
            <rect width="100" height="100" x="0" y="0" />
        </clipPath>
    </defs>
    <g>
        <rect fill="orange" width="100" height="100" x="0" y="0"/>
        <text fill="black" dy="2em" x="0" y="0" class="nodelabel" clip-path="url(#nodeclipper)">
            This is a label yo
        </text>
        
    </g>
</svg>

<svg id="svg2" width="200" height="200">
    <defs>
        <clipPath id="nodeclipper">
            <circle cx="20" cy="0" r="40" />
        </clipPath>
    </defs>
    <g transform="translate( 100, 100 )">
        <rect fill="green" width="100" height="100" x="0" y="0"/>
        <text fill="white" dy="2em" x="0" y="0" class="nodelabel" clip-path="url(#nodeclipper)">
            This is a label yo
        </text>
        
    </g>
</svg>

CSS

.nodelabel {
    font-size: 16px;
}