JSFiddle - React, Tailwind, and code Playground

HTML

<svg>
    <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> 
</svg>

CSS

rect { shape-rendering: crispEdges; }

JavaScript

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";
document.getElementsByTagName("svg")[0].appendChild(rect);