SVG中tspangetBBox()Firefox报错解决方法

问题描述：tspan元素getBBox()的跨浏览器差异

在SVG中，getBBox()方法是获取元素渲染尺寸和位置的常用工具。然而，当对嵌套的元素调用此方法时，可能会遇到跨浏览器兼容性问题。具体来说，在Firefox浏览器中，对一个具有实际渲染内容的子元素执行getBBox()，其返回的高度值可能远小于实际渲染高度（例如，返回18px，而实际渲染高度可能为450px），而在Chrome或Edge等浏览器中则能得到正确的值。

此外，直接对元素或其更上层的元素调用getBBox()，有时会返回所有维度（x, y, width, height）均为0的SVGRect对象，即使该元素包含可见内容。

以下是一个示例SVG结构和相关的JavaScript代码，展示了这一问题：

SVG 结构片段：

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

JavaScript 尝试：

// 尝试获取嵌套 tspan 的 BBox
let elem = document.getElementById('t18yiifj');
let elemChild = elem.querySelector("tspan[font-size]"); // 目标是包含 "endo" 的 tspan
console.log("elemChild BBox:", elemChild.getBBox()); // Firefox 返回错误高度，Chrome/Edge 返回正确高度

// 尝试获取 tspan 及其父级的 BBox
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}

这种不一致性给SVG元素的精确布局和交互带来了挑战。

解决方案一：获取父级元素的边界框（整体文本高度）

如果您的需求仅仅是获取包含目标tspan的整个文本块的整体高度，而不必精确到单个tspan，那么可以考虑获取其最近的父级元素的边界框。由于元素是所有文本内容的容器，它的getBBox()通常能提供一个相对准确的整体尺寸。

适用场景：

• 您需要整个文本行的总高度。
• 对单个tspan的精确边界框要求不高。

示例代码：

let targetTspan = document.getElementById('t18yiifj');
let parentTextElement = targetTspan.closest('text'); // 获取最近的 <text> 父元素
let boundingBoxText = parentTextElement.getBBox();
let totalTextHeight = boundingBoxText.height;

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

注意事项： 这种方法虽然简单，但它返回的是整个元素的边界框，而不是特定的边界框。如果元素包含多个tspan或有其他文本内容，这个高度将是所有内容的集合高度。

解决方案二：使用getExtentOfChar()精确计算tspan边界框

对于需要精确获取特定元素边界框的场景，getBBox()的不可靠性使得我们需要寻找替代方案。SVG DOM提供了SVGTextContentElement.getExtentOfChar(charNum)方法，它可以获取指定字符的边界框。我们可以利用这个方法来计算一个tspan元素的精确边界框。

核心思路： 一个tspan元素的整体边界框可以由其第一个字符和最后一个字符的边界框推导出来。通过获取第一个字符的x、y和height，以及最后一个字符的x和width，我们可以组合出整个tspan的边界框。

实现步骤：

1. 获取目标tspan元素。
2. 获取tspan的文本内容。
3. 获取第一个字符的边界框 (getExtentOfChar(0))。
4. 获取最后一个字符的边界框 (getExtentOfChar(length - 1))。
5. 根据这两个边界框计算整个tspan的边界框。

辅助函数 getBBoxTspan：

/**
 * 计算给定 tspan 元素的精确边界框。
 * @param {SVGTextContentElement} el - 目标 tspan 元素。
 * @returns {SVGRect} 包含 x, y, width, height 的对象。
 */
function getBBoxTspan(el) {
  // 清理文本内容中的空白符，确保字符数组准确
  let chars = el.textContent.trim(); // 使用trim()处理可能的前后空白
  if (!chars) {
    // 如果 tspan 为空或只有空白，返回一个空的 bbox
    return { x: 0, y: 0, width: 0, height: 0 };
  }

  let charsArr = chars.split('');

  // 获取第一个字符的边界框
  let bb0 = el.getExtentOfChar(0);

  // 获取最后一个字符的边界框
  // 注意：getExtentOfChar的索引是基于textContent的，如果textContent被trim()过，
  // 这里的索引需要对应原始textContent中的位置，但通常我们关心的是渲染字符的边界。
  // 为了简化，我们假设charsArr的索引与渲染字符的逻辑顺序一致。
  let bb1 = el.getExtentOfChar(el.textContent.length - 1); 

  // 组合成完整的边界框
  let bb = {
    x: bb0.x,
    y: bb0.y,
    width: (bb1.x + bb1.width) - bb0.x, // 最后一个字符的右边界 - 第一个字符的左边界
    height: bb0.height // 假设所有字符高度一致，取第一个字符的高度
  };
  return bb;
}

示例用法及可视化：

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

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

// 可选：将计算出的边界框渲染到 SVG 上进行验证
let svg = document.getElementById('svg');
let ns = "http://www.w3.org/2000/svg";
let bbRect = document.createElementNS(ns, 'rect');
svg.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%'); // 使用百分比单位确保在缩放时可见

CSS 样式（用于可视化）：

svg {
  border: 1px solid #ccc;
  width: 75%; /* 示例宽度 */
  overflow: visible; /* 确保边界框即使超出 viewBox 也能显示 */
}

完整 SVG 示例：

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

注意事项：

• getExtentOfChar()方法返回的边界框是相对于SVG视口（viewport）的，而不是相对于其父元素的。
• 此方法假定tspan中的所有字符具有相同的基线和高度。对于混合字体或垂直排版的情况，可能需要更复杂的逻辑。
• 在调用getExtentOfChar()之前，请确保tspan元素已被渲染到DOM中，否则可能无法正确获取字符的边界信息。

总结

getBBox()方法在SVG中获取元素边界框时非常有用，但在处理嵌套的元素时，尤其是在Firefox浏览器中，其行为可能不一致或不准确。为了解决这一跨浏览器兼容性问题，我们可以采取两种策略：

1. 对于整体文本高度需求： 使用父级元素的getBBox()可以快速获取包含所有文本内容的整体尺寸。
2. 对于精确tspan边界框需求： 推荐使用SVGTextContentElement.getExtentOfChar()方法。通过组合第一个和最后一个字符的边界框信息，我们可以构建一个精确且跨浏览器兼容的tspan边界框计算函数。

选择哪种方案取决于您的具体需求。在大多数需要精确控制tspan布局和交互的场景中，利用getExtentOfChar()实现自定义边界框计算是更健壮和可靠的选择。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~