如何复用嵌套SVG并为各片段设置不同viewBox实现响应式按钮

要实现固定两端、中间拉伸的响应式按钮，不用复杂的嵌套/use/symbol标签，直接通过拆分图形+精准设置viewBox和preserveAspectRatio就能解决，具体步骤如下：

1. 拆分原始SVG为三个功能区块 #

把250x44的按钮按拉伸规则拆分：

• 左端：取左侧固定宽度（比如0-30px）的图形，不拉伸
• 中间：取中间可变宽度（比如30-220px）的图形，水平拉伸填充剩余空间
• 右端：取右侧固定宽度（比如220-250px）的图形，不拉伸

2. 重构SVG结构（平铺式布局） #

在一个主SVG里直接放置三个子SVG，通过x属性定位，配合对应属性控制拉伸规则：

<svg width="100%" height="44" viewBox="0 0 250 44" preserveAspectRatio="none">
  <!-- 左端：固定宽度，左对齐 -->
  <svg x="0" width="30" height="44" viewBox="0 0 30 44" preserveAspectRatio="xMinYMid meet">
    <!-- 粘贴左端原始图形代码 -->
  </svg>
  <!-- 中间：拉伸填充剩余空间 -->
  <svg x="30" width="calc(100% - 60)" height="44" viewBox="30 0 190 44" preserveAspectRatio="xMidYMid slice">
    <!-- 粘贴中间原始图形代码 -->
  </svg>
  <!-- 右端：固定宽度，右对齐 -->
  <svg x="calc(100% - 30)" width="30" height="44" viewBox="220 0 30 44" preserveAspectRatio="xMaxYMid meet">
    <!-- 粘贴右端原始图形代码 -->
  </svg>
</svg>

3. 关键属性说明 #

• 主SVG设置width="100%"+preserveAspectRatio="none"，确保整体占满容器宽度
• 左/右端子SVG：用xMinYMid meet/xMaxYMid meet保证图形按原始比例显示，不拉伸变形
• 中间子SVG：用calc(100% - 60)（60为左右端宽度之和）占满剩余空间，xMidYMid slice实现水平拉伸填充

4. 常见问题排查 #

• 不要用symbol/use做切片定位，这类标签会复制完整的viewBox，容易导致定位偏移
• 确保每个子SVG的viewBox严格对应原始图形的坐标范围，比如左端的viewBox必须是0 0 30 44，不能写错起始x坐标
• 如果出现间隙，检查子SVG的x属性是否精准，或主SVG的preserveAspectRatio是否设为none

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