解决SVG tspan getBBox() 在Firefox中返回错误值的方案

<svg id="svg" viewBox="0 0 10000 10000">
  <g id="dynam_10206" class="dynam" style="cursor: pointer;" fill="rgba(0, 0, 0, 1.0)" stroke="rgba(0, 0, 0, 1.0)">
    <text x="7465" y="1690" font-size="0px">
      <tspan id="tcbd4q9" class="text">
        <tspan font-size="405px" class="text">cresc</tspan>
      </tspan>
      <tspan id="supplied_1234a" class="supplied highlighted">
        <tspan id="t18yiifj" class="text">
          <tspan font-size="405px" class="text">endo</tspan>
        </tspan>
      </tspan>
    </text>
  </g>
</svg>

// 尝试获取子tspan的BBox
let elem = document.getElementById('t18yiifj'); 
let elemChild = elem.querySelector("tspan[font-size]");
console.log("elemChild BBox:", elemChild.getBBox()); // Firefox中高度可能错误 (~18)

// 尝试获取父tspan的BBox
console.log("elem BBox:", elem.getBBox()); // Firefox中可能返回 {height: 0, width: 0, x: 0, y: 0}

let elemParent = elem.closest('.supplied');
console.log("elemParent BBox:", elemParent.getBBox()); // Firefox中可能返回 {height: 0, width: 0, x: 0, y: 0}

let endoTspan = document.getElementById('t18yiifj'); // 示例中为 'endo' 文本所在的tspan
let parentTextElement = endoTspan.closest('text');
let bbTxt = parentTextElement.getBBox();
let totalTextHeight = bbTxt.height;

console.log("Parent <text> BBox:", bbTxt);
console.log("Total text height:", totalTextHeight);

/**
 * 为SVG tspan元素计算精确的边界框。
 * @param {SVGTextContentElement} el 要计算边界框的tspan元素。
 * @returns {DOMRect} 包含x, y, width, height属性的边界框对象。
 */
function getBBoxTspan(el) {
  // 清理空白符，获取实际文本字符数组
  let chars = el.textContent;
  let charsArr = chars.split('');

  if (charsArr.length === 0) {
    // 如果tspan没有文本内容，返回一个空的BBox
    return { x: 0, y: 0, width: 0, height: 0 };
  }

  // 获取第一个字符的边界框
  let bb0 = el.getExtentOfChar(0);
  // 获取最后一个字符的边界框
  let bb1 = el.getExtentOfChar(charsArr.length - 1);

  // 计算总边界框
  let bb = {
    x: bb0.x,
    y: bb0.y,
    width: (bb1.x + bb1.width) - bb0.x,
    height: bb0.height // 假设同一tspan内所有字符高度相同
  };
  return bb;
}

// 获取目标tspan元素
let elem = document.getElementById('t18yiifj'); 
let tspanText = elem.querySelector("tspan[font-size]");

// 调用辅助函数计算精确边界框
let bbT = getBBoxTspan(tspanText);
console.log("Calculated tspan BBox:", bbT);

// 可选：将计算出的边界框渲染为红色矩形以进行可视化验证
let ns = "http://www.w3.org/2000/svg";
let svgElement = document.getElementById('svg'); // 获取SVG根元素

let bbRect = document.createElementNS(ns, 'rect');
svgElement.append(bbRect); // 将矩形添加到SVG中

bbRect.setAttribute('x', bbT.x);
bbRect.setAttribute('y', bbT.y);
bbRect.setAttribute('width', bbT.width);
bbRect.setAttribute('height', bbT.height);
bbRect.setAttribute('fill', 'none');
bbRect.setAttribute('stroke', 'red');
bbRect.setAttribute('stroke-width', '0.2%'); // 使用百分比宽度，适应SVG viewBox

svg {
  border: 1px solid #ccc;
  width: 75%; /* 适应容器宽度 */
  overflow: visible; /* 确保边界框可见，即使超出 viewBox */
}