SVG无法适配父容器，preserveAspectRatio未按预期生效

要让SVG完美适配width: 10rem; height: 10rem;的父容器，同时实现水平/垂直居中并填满空间，你需要调整SVG的CSS属性并理解viewBox与preserveAspectRatio的协作逻辑，具体步骤如下：

1. 关键CSS调整（核心解决未生效的问题） #

你的preserveAspectRatio和viewBox设置本身是正确的，但缺少了让SVG继承父容器尺寸的关键CSS：

svg {
  width: 100%;
  height: 100%;
  display: block; /* 消除inline元素默认的底部间隙 */
}

• width: 100%和height: 100%让SVG完全继承父容器的10rem×10rem尺寸，这是SVG能适配父容器的前提；
• display: block避免SVG作为inline元素时产生的额外垂直空间，确保它完全贴合父容器边界。

2. 确认SVG属性设置 #

保持你已有的属性即可，因为父容器和viewBox都是正方形比例（1:1），preserveAspectRatio="xMidYMid meet"会让SVG内容刚好填满父容器并居中：

<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
  <!-- 你的图形内容 -->
</svg>

3. 理解viewBox的工作机制 #

你对viewBox的观察是正确的：viewBox后两位数值越小，SVG内部图形显示越大。具体来说：

• viewBox="0 0 100 100"定义了SVG内部的坐标系：左上角为(0,0)，右下角为(100,100)，整个画布被划分为100×100的单位；
• 当SVG的显示尺寸（比如父容器的10rem×10rem）与viewBox的坐标系尺寸不同时，浏览器会计算缩放比例：
  • meet模式（你使用的）：取显示宽度/viewBox宽度和显示高度/viewBox高度中的较小值作为缩放比例，确保整个viewBox内容都能显示在SVG范围内，再通过xMidYMid在水平和垂直方向居中；
  • 因为你的父容器和viewBox比例完全一致（都是1:1），所以缩放比例刚好让图形填满整个父容器，不会有留白或裁剪。

如果后续父容器比例变化，比如变成16:9，meet模式会让图形保持比例并居中显示（上下或左右留空）；如果想强制填满父容器（允许裁剪超出部分），可以把preserveAspectRatio改为xMidYMid slice。

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