强制重新计算 svg 文本大小

Question

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

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;

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

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

jsfiddle

Answer 1

• 必须使用 createElementNS 创建 SVG 元素

• 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>