HTML字号调整时如何让SVG文本始终处于视口范围内？

问题描述 #

我编写的SVG文本在HTML默认16px字号下显示正常，但用户增大字号后文本会被截断，希望实现HTML字号变化时文本始终处于SVG视口内。

原代码 #

<svg class="league_name" viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
  <text text-anchor="middle" x="50%" y="50%">
    <tspan class="league_name_text" style="fill:#080e25">Weapons of</tspan>
    <tspan class="league_name_text"></tspan>
    <tspan class="league_name_text" style="fill:#B82601">DMD</tspan>
    <tspan class="league_slogan_text" x="50%" dy="20" style="font-style:italic;fill:#444;font-weight:300">Fantasy Football League</tspan>
    <tspan class="establshed-svgtext" x="50%" dy="20" style="fill:#777;font-weight:300;font-style:italic">B.O.T.H 2003</tspan>
  </text>
</svg>

解决方案 #

问题核心在于使用了固定像素值（比如dy="20"、固定的viewBox尺寸），这些值不会随HTML字号变化调整，导致文本溢出。以下是几种可行的修复方式：

1. 用相对单位替换固定像素

将文本行间距dy的固定像素改为em（相对于当前字号的单位），同时让SVG容器自适应缩放：

• dy="1.2em"：行间距随字号成比例变化
• 给SVG添加width: 100%; height: auto; preserveAspectRatio: xMidYMid meet;，确保SVG按比例缩放且内容始终居中显示

修改后的代码：

<svg class="league_name" viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: auto; preserveAspectRatio: xMidYMid meet;">
  <text text-anchor="middle" x="50%" y="50%" style="font-size: 1em;">
    <tspan class="league_name_text" style="fill:#080e25;">Weapons of</tspan>
    <tspan class="league_name_text"></tspan>
    <tspan class="league_name_text" style="fill:#B82601;">DMD</tspan>
    <tspan class="league_slogan_text" x="50%" dy="1.2em" style="font-style:italic;fill:#444;font-weight:300;">Fantasy Football League</tspan>
    <tspan class="establshed-svgtext" x="50%" dy="1.2em" style="fill:#777;font-weight:300;font-style:italic;">B.O.T.H 2003</tspan>
  </text>
</svg>

2. 让SVG自动适配内容尺寸

如果不需要固定的SVG尺寸，可以移除viewBox，改用CSS控制SVG的最大宽度，同时让文本自然排列：

.league_name {
  max-width: 100%;
  height: auto;
}
.league_name text {
  font-size: 1em;
}

这种方式下SVG会根据文本实际大小自动调整容器尺寸，彻底避免截断。

3. 结合CSS媒体查询增强适配

如果需要针对不同字号做精细化调整，可以用媒体查询动态修改文本样式：

@media (font-size: 18px) {
  .league_name_text {
    font-size: 1.1em;
  }
  .league_slogan_text {
    dy: 1.3em;
  }
}

关键要点 #

• 避免在SVG文本布局中使用固定像素值，优先选择em、%等相对单位
• 确保SVG容器具备自适应缩放能力，让容器能容纳放大后的文本
• 继承HTML字号（通过font-size: 1em），保证文本缩放与全局字号同步

内容的提问来源于stack exchange，提问作者Michael Shackelford