如何让SVG文本充满容器？实现文本拉伸适配无空隙

要让文本完全填满指定尺寸的带边框SVG容器，需要同时处理水平拉伸和垂直贴合——默认字体的上下留白是导致空隙的核心原因，以下是两种可行方案：

方案一：调整字体属性直接贴合容器 #

通过设置字体大小匹配容器高度，配合基线对齐消除垂直空隙，同时保留水平拉伸配置：

<svg width="714" height="156">
    <rect x="0" y="0" width="714" height="156" stroke="red" stroke-width="3px" fill="white"/>
    <!-- 核心修改：匹配容器高度的字号+底部基线对齐+水平满宽拉伸 -->
    <text x="0" y="100%" 
          dominant-baseline="bottom" 
          lengthAdjust="spacingAndGlyphs" 
          textLength="100%" 
          font-size="156px"
          font-family="sans-serif">TEST</text>    
</svg>

关键修改说明： #

• font-size="156px"：让文本基础高度匹配容器高度，大幅减少垂直留白
• dominant-baseline="bottom" + y="100%"：让文本底部对齐容器底部，顶部自然贴合容器顶部（部分字体若仍有极小空隙，可微调font-size至160px左右抵消）
• x="0" + textLength="100%"：让文本从容器左侧开始，水平方向完全拉伸填满宽度
• 指定font-family="sans-serif"：避免不同默认字体的留白差异影响效果

方案二：用transform精准缩放（适配复杂文本） #

如果方案一的字体调整仍有间隙，可通过transform计算缩放比例，让文本包围盒完全贴合容器：

<svg width="714" height="156">
    <rect x="0" y="0" width="714" height="156" stroke="red" stroke-width="3px" fill="white"/>
    <!-- 通过scale缩放文本至容器尺寸，参数需根据文本原始尺寸调整 -->
    <text x="50%" y="50%" 
          dominant-baseline="middle" 
          text-anchor="middle"
          transform="scale(714/48, 156/144)"
          font-size="144px">TEST</text>    
</svg>

关键说明： #

• transform="scale(水平缩放比, 垂直缩放比)"：水平缩放比=容器宽度/文本原始宽度，垂直缩放比=容器高度/文本原始高度（示例中48、144是"TEST"在144px字号下的原始宽高，需根据实际字体调整）
• 保留text-anchor="middle"和dominant-baseline="middle"：确保缩放后的文本居中对齐容器

内容的提问来源于stack exchange，提问作者Polaris Nation