How to get the exact BBox for svg

I am trying to figure out why getBBox() for tspan element of a svg does not return the dimension.

To demonstrate this with an example,

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">

    <text class="t1" id="t1" font-size="20" font-family="PT Mono" text-decoration="underline">
        <tspan class="tsp1" id="tsp1" x="10.23" y="135.05">Abc ef ghi</tspan>
    </text>
    <rect class="rect1" id="rect1" x="9.23" y="112.73368530273439" height="31.546314697265625" width="1" fill="orange" />
</svg>

If I run BBox on both tsp1 and rect1, it returns the correct dimension for rect1 but not for tsp1

var tsp = document.getElementById('tsp1');
var tspBBox = tsp.getBBox();

var rect = document.getElementById('rect1');
var rectBBox = rect.getBBox();

S1

I was expecting BBox to return the exact x and y for tsp1 but it does not.
I don’t know why. I need to pass on the exact values to the succeeding class dynamically.

How can javascript return the exact dimension for the tspan element?

Thank you in advance.