JSFiddle - React, Tailwind, and code Playground

by prozoroff

HTML

<svg id="svg" version="1.1" height="400" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 200" unselectable="on" style="-webkit-user-select: none; ">
    <g id="text">
        <text x="0" y="7" style="font-family: Tahoma; font-size: 100px;">
            <tspan dy="9" x="0" dx="8" xml:space="preserve">©</tspan>
            <tspan dy="9" x="0" dx="8" xml:space="preserve">®</tspan>
            <tspan dy="9" x="0" dx="8" xml:space="preserve">™</tspan>
            <tspan dy="9" x="0" dx="8" xml:space="preserve">℠</tspan>
            <tspan dy="9" x="0" dx="8" xml:space="preserve"> </tspan>
        </text>
    </g>
</svg>

JavaScript

alert($('tspan')[0].getComputedTextLength());
alert($('tspan')[1].getComputedTextLength());
alert($('tspan')[2].getComputedTextLength());
alert($('tspan')[3].getComputedTextLength());
alert($('tspan')[4].getComputedTextLength());