强制重新计算 svg 文本大小

Question

我将 tspan 附加到 text 节点，但浏览器没有重新计算新的 size/box

JS代码：

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;

它总是returns 0, 0 这意味着大小不会在追加后重新计算

在这种情况下如何强制重新计算？

jsfiddle

Answer 1

必须使用 createElementNS
innerText 不是 SVG 元素上的函数。您可以改用 textContent，它也适用于 HTML 元素。

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>

强制重新计算 svg 文本大小

Force recalculate svg text size

javascript

svg

text

tspan