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
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文本大小

1 个答案: