如何将SVG文本适配到SVG背景矩形内（单行无换行）

我来帮你解决这个SVG文本单行适配的问题！你试过CSS没效果很正常，因为SVG文本的布局规则和HTML元素不太一样，用JavaScript动态调整是最可靠的方案，这里给你两种实用的思路：

方案一：动态调整文本字体大小 #

这种思路直接修改文本的font-size属性，逐步缩小直到文本宽度刚好适配容器，逻辑直观易懂：

实现步骤 #

1. 等待自定义字体加载完成（避免字体未加载导致宽度计算错误）
2. 获取文本元素（你的tspan#span-15）和容器的宽度
3. 循环调整字体大小，直到文本宽度≤容器宽度

代码示例 #

把这段JS放在页面底部（或者DOM加载完成后执行）：

// 等待字体加载完成
document.fonts.ready.then(() => {
  const textSpan = document.getElementById('span-15');
  const textSVG = textSpan.closest('svg');
  // 获取容器的可用宽度（背景矩形对应的容器宽度）
  const containerWidth = document.getElementById('box-13').clientWidth;
  
  // 初始字体大小，从现有值开始
  let fontSize = parseFloat(textSpan.parentElement.getAttribute('font-size'));
  
  // 循环调整字体大小，设置最小字号下限避免过度缩小
  while (textSpan.getBBox().width > containerWidth && fontSize > 8) {
    fontSize -= 0.5;
    textSpan.parentElement.setAttribute('font-size', `${fontSize}px`);
  }
});

方案二：调整文本SVG的viewBox（你提到的可行方向） #

这种思路通过修改文本SVG的viewBox属性，让SVG自动缩放文本到容器宽度，不需要手动调整字体大小，计算逻辑如下：

核心计算方法 #

1. 获取文本的实际宽度（用getBBox().width）
2. 容器宽度为已知的目标宽度（比如你的box-13的clientWidth）
3. 文本SVG的原始viewBox是0 0 100 45，我们需要把viewBox的宽度设置为文本的实际宽度，这样SVG会自动按比例缩放整个viewBox，让文本刚好填满容器宽度（保持单行）

代码示例 #

同样放在DOM加载完成后执行：

document.fonts.ready.then(() => {
  const textSpan = document.getElementById('span-15');
  const textSVG = textSpan.closest('svg');
  const containerWidth = document.getElementById('box-13').clientWidth;
  
  // 获取文本的实际宽度
  const textWidth = textSpan.getBBox().width;
  // 文本SVG的原始viewBox高度是45，保持高度不变
  const viewBoxHeight = 45;
  
  // 设置新的viewBox：x=0, y=0, width=文本实际宽度, height=原高度
  textSVG.setAttribute('viewBox', `0 0 ${textWidth} ${viewBoxHeight}`);
});

为什么这个方法有效？ #

SVG的viewBox定义了SVG的"画布"范围，而SVG本身设置了width="100%" height="100%"，当viewBox的宽度等于文本实际宽度时，SVG会自动将整个画布缩放到容器的宽度，文本作为画布的一部分，自然会被等比例缩放，刚好填满容器且不换行。

注意事项 #

• 必须等待自定义字体加载完成后再计算宽度，否则getBBox()会使用系统默认字体计算，结果不准确
• 两种方案都可以结合requestAnimationFrame优化性能，但对于单个元素来说，直接循环已经足够高效

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