未知尺寸div用CSS Grid叠加SVG：preserveAspectRatio失效问题

你的问题出在对preserveAspectRatio作用范围的误解上：这个属性控制的是SVG内部的viewBox内容如何适配SVG元素自身的尺寸，而非SVG元素如何适配外部容器的尺寸。

SVG作为替换元素，默认会根据viewBox的宽高比（这里是1:1）维持自身的固有比例。所以即便你给SVG设置了width: 100%，它的高度会自动按1:1比例计算，导致无法填满容器的高度，看起来还是方形。

解决方法 #

给SVG添加aspect-ratio: unset，禁用其固有宽高比约束，让它完全遵循你设置的宽高值填充网格单元格：

修改后的CSS代码：

#wrapper {
  display: grid;
  width: fit-content;
  height: fit-content;
}

#d1 {
  grid-area: 1 / 1;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: 5px solid black;
}

#overlay {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  aspect-ratio: unset; /* 关键：取消SVG的固有宽高比限制 */
}

HTML部分保留原有的preserveAspectRatio="none"即可，此时SVG内部的矩形会跟随SVG的尺寸拉伸，完全覆盖下方的div。

原理说明 #

• aspect-ratio: unset让SVG不再强制维持1:1的固有比例，而是严格按照width:100%和height:100%填充网格单元格；
• preserveAspectRatio="none"则确保SVG内部的viewBox内容（紫色矩形）能拉伸填满SVG的整个区域，不会留白或裁剪。

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