为何SVG无法适配background-size:100% 100%实现容器全覆盖？

我最近遇到个头疼的问题：有一张SVG图片，想让它完整覆盖容器还保留独特边缘，本来以为background-size:100% 100%是完美选择——这个属性对普通JPG/PNG都管用，但偏偏对这张SVG无效，这到底是为啥？

相关代码如下：

html, body { background-color: #ddd; }
.container { 
  margin: 20px; 
  padding: 20px; 
  border: 1px solid #000; 
  background-repeat: no-repeat; 
  background-size: 100% 100%; 
}
.container.svg { 
  background-image: url(https://svgshare.com/i/RWM.svg); 
}

哈哈，这个坑我之前也踩过！核心原因和SVG的矢量特性直接相关，和普通位图的逻辑完全不一样：

• 普通位图（比如JPG/PNG）本身没有内置的比例约束，background-size:100% 100%会直接强制它拉伸填满容器，不管原有比例。
• 但SVG是矢量图形，它内部默认会遵循自己viewBox定义的原始比例，而且默认的preserveAspectRatio属性值是xMidYMid meet——这个属性的作用是让SVG保持原有比例，尽可能放大但不超出容器边界，所以哪怕你给容器设了background-size:100% 100%，SVG还是会“固执”地维持自身比例，不会被强制填满容器。

那怎么解决这个问题？给你两个实用方案：

方案1：修改SVG源文件的属性 #

打开你的SVG文件，找到根标签<svg>，把preserveAspectRatio的值改成none，比如：

<svg viewBox="0 0 200 150" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
  <!-- 你的SVG内容 -->
</svg>

这样SVG就会完全忽略自身的原始比例，乖乖跟着容器的尺寸拉伸，完美适配background-size:100% 100%的设置。

方案2：排查SVG的基础属性 #

如果修改preserveAspectRatio后还是无效，检查下SVG根标签是否设置了viewBox——要是没有这个属性，SVG会以自身硬编码的width和height作为固定尺寸，这时候background-size:100% 100%也无法生效，补充正确的viewBox定义即可。

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