JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="400px" height="400px">
    <g transform="translate(100 50)">
        <text id="TaxFilingResource_URL" class="label url" dy="24" dx="30">
            <tspan id="TaxFilingResource.URL.1">www.xyz.com</tspan>
            <tspan id="TaxFilingResource.URL.2">/home</tspan>
            <tspan id="TaxFilingResource.URL.3">/user</tspan>
        </text>
    </g>
    
    <g id="dest" transform="translate(200 10)">
    </g>
</svg>

CSS

rect {
    shape-rendering: crispEdges;
}

JavaScript

var dest = document.getElementById("dest");
var home = document.getElementById("TaxFilingResource.URL.2");
var extent = home.getExtentOfChar(0);
var width = home.getComputedTextLength();
var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.x.baseVal.value = extent.x;
rect.y.baseVal.value = extent.y;
rect.width.baseVal.value = width;
rect.height.baseVal.value = extent.height;
rect.style.stroke = "red";
rect.style.fill = "none";

// adjust the bbox to new place in the document tree, since different transforms apply:
var fromHometoDestmatrix = home.getTransformToElement(dest);
rect.transform.baseVal.appendItem(rect.transform.baseVal.createSVGTransformFromMatrix(fromHometoDestmatrix));

dest.appendChild(rect);