JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="75px">
<text font-size="8pt" id="text_name" x="30" y="44" fill="#000000" stroke-width="0pt" font-family="Arial,Helvetica,sans-serif" text-anchor="middle" visibility="inherit"><tspan x="30" y="44" dy="8">Text Content</tspan></text>
</svg> 
    <div id="size"></div>
</body>

JavaScript

var bbox1 = document.getElementById("text_name").getBBox();
var f = document.getElementById("text_name").getClientRects();


document.getElementById("size").innerHTML = "<p>Width:" + bbox1.width + " Height: " + bbox1.height + "<br>" +  "Width:" + f[0].width +  " Height: " + f[0].height + "</p>";