SVG通过CSS缩放时出现留白Bug，求解决方法

这问题我之前也踩过坑！核心原因是SVG的viewBox坐标系统、默认的宽高比保留行为，以及你同时设置了SVG标签的物理单位（mm）和CSS的相对单位（px/vw）导致的计算冲突。

问题根源拆解 #

你的SVG里：

• viewBox="0 0 100 99.999997" 定义了SVG内部画布的比例近乎1:1
• 但你给SVG标签硬加了width="100mm" height="100mm"的固定物理尺寸
• 当用CSS覆盖其中一个维度时，浏览器会同时参考原始mm单位和viewBox比例，最终算出不符合预期的留白区域

修复方案（按优先级排序） #

方案1：让CSS完全接管尺寸（推荐）

直接移除SVG标签上的width和height属性，只保留viewBox——这是控制SVG缩放的最佳实践，它会让SVG基于viewBox的比例自适应CSS设置的尺寸：

<svg id="item" viewBox="0 0 100 99.999997" version="1.1">
  <defs id="defs2" />
  <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" bord...
</svg>

然后CSS里只设置你需要的维度，另一边用auto让浏览器自动按比例计算：

#item{ 
  width: calc(30px + 3vw); 
  height: auto; /* 自动匹配viewBox的宽高比，不会留白 */
  background-color: red; 
}

方案2：强制拉伸（不保留比例）

如果你不需要保持SVG的原始比例，想让它完全填充CSS设置的宽高，就给SVG加上preserveAspectRatio="none"属性：

<svg id="item" viewBox="0 0 100 99.999997" preserveAspectRatio="none" version="1.1">
  <!-- 内部元素 -->
</svg>

这样不管你设置width还是height，SVG都会拉伸到对应的尺寸，不会出现留白。

方案3：统一单位（不推荐）

如果一定要保留SVG标签上的尺寸，把mm换成和CSS一致的相对单位（比如%或者直接不写单位，用SVG的用户单位），但这种方式不如方案1灵活。

验证效果 #

按方案1修改后，你调整CSS的width时，SVG会按1:1比例缩放，红色背景只会包裹SVG内容，不会出现垂直留白；同理设置height时，水平方向也不会有多余空白。

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