If you really don’t care that the text gets ugly, here’s how to fit unknown length text into a known width. <svg width=”436″ height=”180″ style=”border:solid 6px” xmlns=”http://www.w3.org/2000/svg”> <g> <text y=”50%” textLength=”436″ lengthAdjust=”spacingAndGlyphs”>UGLY TEXT</text> </g> </svg>
You can simply set your svg’s viewBox to its Bounding Box. function setViewbox(svg) { var bB = svg.getBBox(); svg.setAttribute(‘viewBox’, bB.x + ‘,’ + bB.y + ‘,’ + bB.width + ‘,’ + bB.height); } document.querySelector(‘button’).addEventListener(‘click’, function() { setViewbox(document.querySelector(‘svg’)); }); svg { border: 1px solid } <svg version=”1.1″ id=”svg” xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” x=”0px” y=”0px” viewBox=”0 0 500 300″ … Read more