JSFiddle - React, Tailwind, and code Playground

by Julien Etienne

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="50%" height="50%" viewBox="0 0 1280 720">
<g>
    <rect x='240' y='250' width="800" height="100" fill='green' />
    <text x="240" y="450" extent='800' >This text wraps at 800 units.</text>
    </g>
</svg>

CSS

svg {
    background: yellow;
}
html, body {
    background: #222;
}
text {
    font-family:"sans-serif";
    font-size: 100px;
}

JavaScript

var textEl = document.getElementsByTagName('text');

var lineContent = textEl[0].innerHTML = '<tspan>' + textEl[0].innerHTML + '</tspan>';


var svg = document.getElementsByTagName('svg')[0],
    viewBox = svg.getAttribute('viewBox').split(' '),
    viewBoxWidth = parseInt(viewBox[2], 10);


var initialTextWidth = textEl[0].getBoundingClientRect().width;

var svgWidth = parseInt(svg.getAttribute('width'),10); // percent only

var textpercent = (viewBoxWidth / svgWidth)  * initialTextWidth;
alert(initialTextWidth);
//textEl[0].getAttribute('extent'),


// );

// viewbox /  svg width * get bcr width = resolution