解决Firefox中SVG tspan getBBox()高度计算不准确问题

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

let elem = document.getElementById('t18yiifj'); 
let elemChild = elem.querySelectorAll("tspan[font-size]")[0];
console.log("elemChild BBox:", elemChild.getBBox()); // Firefox返回错误高度，Chrome/Edge返回正确高度

// 对父级tspan或其更上层元素调用getBBox()可能返回0
console.log("elem BBox:", elem.getBBox()); // 所有浏览器可能返回 height: 0, width: 0, x: 0, y: 0
let elemParent = elem.closest('.supplied');
console.log("elemParent BBox:", elemParent.getBBox()); // 所有浏览器可能返回 height: 0, width: 0, x: 0, y: 0

let endo = document.getElementById('t18yiifj'); // 示例中包含“endo”文本的tspan
let bbTxt = endo.closest('text').getBBox(); // 获取最近的父级<text>元素的边界框
let spanH = bbTxt.height; // 获取高度
console.log("Parent text BBox height:", spanH);

/**
 * 计算给定tspan元素的精确边界框。
 * 该函数通过获取tspan内第一个和最后一个字符的边界框来推导整个文本的边界。
 * @param {SVGTextContentElement} el - 要计算边界框的tspan元素。
 * @returns {object} 包含x, y, width, height属性的边界框对象。
 */
function getBBoxTspan(el) {
  // 确保元素是SVGTextContentElement类型且包含文本
  if (!el || typeof el.getExtentOfChar !== 'function' || !el.textContent.trim()) {
    console.warn("Invalid element or no text content for getBBoxTspan:", el);
    return { x: 0, y: 0, width: 0, height: 0 };
  }

  // 清理空白字符，获取实际字符数组
  let chars = el.textContent.trim();
  if (chars.length === 0) {
      return { x: 0, y: 0, width: 0, height: 0 };
  }

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

  // 计算总边界框
  let bb = {
    x: bb0.x,
    y: bb0.y,
    width: (bb1.x + bb1.width) - bb0.x, // 从第一个字符的x到最后一个字符的右边缘
    height: bb0.height // 假设所有字符高度一致
  };
  return bb;
}

// 获取目标tspan元素
let elem = document.getElementById('t18yiifj'); 
let tspanText = elem.querySelector("tspan[font-size]"); // 获取实际包含文本的内层tspan

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

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

if (svgElement) {
  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也能显示 */
}