添加tspan后SVG文本尺寸未更新，如何强制重新计算？

这个情况我太熟悉了！主要有两个常见原因，咱们一步步解决：

1. 先纠正tspan的创建方式（最可能的根本原因） #

SVG元素必须使用SVG命名空间创建，直接用document.createElement('tspan')会创建一个HTML的tspan元素，SVG根本不认识它，自然不会计算它的尺寸。你需要改成：

// 用SVG命名空间创建tspan
var tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');

2. 强制浏览器重新计算布局 #

即使创建了正确的SVG tspan，有时候DOM更新后浏览器不会立刻重排，导致getBBox()拿到旧值。这时候可以用两种方法强制触发：

方法一：用requestAnimationFrame等待重绘 #

这个方法会让代码在浏览器下一次重绘前执行，此时元素已经被渲染，尺寸计算完成：

var result = document.querySelector('#result'); 
var text = document.querySelector('text'); 
// 正确创建SVG tspan
var tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan'); 
tspan.setAttribute('x', '0'); 
tspan.setAttribute('dy', '0'); 
tspan.innerText = 'text'; 
text.appendChild(tspan);

// 等待浏览器重绘后获取BBox
requestAnimationFrame(() => {
  var box = text.getBBox();
  result.innerHTML = box.width + ', ' + box.height;
});

方法二：手动触发同步重排 #

读取某些会触发布局计算的属性（比如offsetWidth、getComputedStyle），会强制浏览器立即计算当前元素的布局：

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.innerText = 'text'; 
text.appendChild(tspan);

// 强制触发重排（void用来忽略返回值，避免不必要的变量存储）
void text.offsetWidth;

var box = text.getBBox();
result.innerHTML = box.width + ', ' + box.height;

先试试修正命名空间的问题，很多时候这就是根源；如果还是不行，再加上强制重排的方法，基本就能解决啦！

内容的提问来源于stack exchange，提问作者unloco