Force recalculate svg text size

Question

I'm appending a tspan to a text node but the browser isn't recalculating the new size/box

JS code:

var result = document.querySelector('#result');
var result_delayed = document.querySelector('#result_delayed');

var text = document.querySelector('text');
var tspan = document.createElement('tspan');
tspan.setAttribute('x', '0');
tspan.setAttribute('dy', '0');
tspan.innerText = 'text';
text.appendChild(tspan);

var box = text.getBBox();

result.innerHTML = box.width + ', ' + box.height;

It always returns 0, 0 which means the size isn't recalculated after the append

How to force recalc in this case?

jsfiddle

Answer 1

• SVG elements must be created using createElementNS

• innerText is not a function present on SVG elements. You can use textContent instead, which also works on HTML elements.

var result = document.querySelector('#result');

var text = document.querySelector('text');
var tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
tspan.setAttribute('x', '0');
tspan.setAttribute('dy', '0');
tspan.textContent = 'text';
text.appendChild(tspan);

var box = text.getBBox();

result.innerHTML = box.width + ', ' + box.height;

<div id="result">
result
</div>

<svg width="0" height="0">
  <text font-size="72" font-family="Arial" fill="#000" x="0" y="0"></text>
</svg>