JavaScript SVGTextContentElement 怎样测量一段字符的渲染长度

我第一次在 SVG 标签上做“放不下就截断”时，先调用了 getComputedTextLength()。它能告诉我整段文字有多长，却不能回答“从第 3 个字符开始的 5 个字符占多少宽度”。真正对应这个问题的是 SVGTextContentElement.getSubStringLength(index, length)：第一个参数是起始索引，第二个参数是字符数，返回一个浮点数。

官方地址：https://developer.mozilla.org/en-US/docs/Web/API/SVGTextContentElement

这两个 API 都以 SVG 已完成布局后的文字为依据。整段测量用 getComputedTextLength()，局部测量用 getSubStringLength()；如果你在做标签截断、沿路径放置文字或计算自适应间距，先把“测量对象”选对，后面的判断会简单很多。

先把两种长度分开

getComputedTextLength() 不接收参数，返回当前元素内全部文本的计算长度。getSubStringLength(0, 5) 则只测量从索引 0 开始的 5 个字符。两者返回的都是浮点数，单位跟 SVG 的用户坐标一致，不应按 CSS 像素字符串处理。

const label = document.querySelector("#label");

// 整段长度适合判断完整标签是否超过容器预算。
const fullLength = label.getComputedTextLength();

// 子串长度适合判断某一段文字能否放进剩余空间。
const prefixLength = label.getSubStringLength(0, 5);

console.log({ fullLength, prefixLength });

用 getSubStringLength 测量指定字符区间

如果需求是测量“第 index 个字符开始的 length 个字符”，直接调用该方法即可。比如从第 2 个字符开始取 4 个字符，就是 getSubStringLength(2, 4)。它按文本排版后的字形宽度计算，并会计入 CSS 的 letter-spacing 与 word-spacing；但 MDN 明确说明，x 属性造成的视觉间距调整不计入这个方法的子串长度。

function measureRange(textElement, index, length) {
  // 先拒绝负数，避免把业务参数错误交给 DOM API。
  if (index 

这里的“字符”是 SVG 文本内容中的可寻址字符索引，不要把它简单等同于用户眼中的字形数量。复杂文字、组合字符或字体替换可能让字符与字形不是一一对应，因此布局逻辑应以 API 返回的长度为准。

把测量结果用于按宽度截断

实际项目里，我更常见的做法是从左到右扩大前缀，每次测量候选前缀，直到下一次增长会超过预算。这样比拿平均字符宽度估算可靠，尤其是中英文混排、粗体或字距发生变化时。

function fitTextByWidth(textElement, maxWidth) {
  const count = textElement.getNumberOfChars();

  // 从一个字符开始尝试，找到不超过预算的最长前缀。
  let fitted = 0;
  for (let next = 1; next  maxWidth) break;
    fitted = next;
  }

  // 这里只返回字符数量；是否追加省略号由调用方决定。
  return fitted;
}

const label = document.querySelector("#label");
const visibleCount = fitTextByWidth(label, 140);
console.log(`可放入预算的字符数：${visibleCount}`);

间距、索引和异常边界

有三个边界值得单独记住。第一，index 是起始索引，length 是要包含的字符数，不是结束索引。第二，索引超过最高索引，或 length 为负数时，浏览器会抛出 IndexSizeError；业务层最好在调用前做参数约束。第三，letter-spacing 和 word-spacing 会影响子串长度，而通过 x 属性做出的视觉位置调整不在该方法的统计范围内。

如果只是测整段文字，不要用循环把每个字符长度相加，直接调用 getComputedTextLength() 更清楚。只有当你需要某个区间、最长前缀或逐字符定位时，才使用 getSubStringLength()。此外，字体、字号和样式改变后应重新测量，不要长期缓存旧结果。

相关问题

getSubStringLength 的返回值是整数吗？不是，返回浮点数；字体和间距可能让结果包含小数。

想测整段文字应该调用哪个方法？调用 getComputedTextLength()，它不需要参数。

为什么用 x 调整每个字符后，长度看起来对不上？因为 getSubStringLength() 不计算 x 属性带来的视觉间距调整；这种场景需要重新设计布局判断，不能只依赖该返回值。