为何SVG随父元素宽度缩放却不随高度缩放？

你遇到的问题是SVG能随父元素宽度变化缩放，但无法随高度调整，核心原因出在父元素高度的依赖链断裂以及SVG自身默认尺寸限制，具体分析和解决如下：

问题根源 #

• 父元素div设置height:100%但无效：HTML和Body标签默认高度是由内容撑开的，并非占满视口高度，所以div的100%高度没有可继承的父级高度参考，实际高度还是由SVG的默认高度决定。
• SVG默认尺寸限制：SVG标签默认的宽度是300px、高度是150px，即使父元素高度正常，SVG也不会自动占满父元素高度，自然无法随父元素高度变化缩放。

解决步骤 #

1. 打通高度依赖链 #

给HTML和Body设置100%高度，让div的100%高度有明确的参考：

html, body {
  height: 100%;
  margin: 0; /* 去掉默认边距，避免出现滚动条 */
}
div {
  height: 100%;
  width: 100%;
}

2. 让SVG占满父元素尺寸 #

给SVG添加width:100%和height:100%属性，使其完全继承父元素的尺寸：

<div>
  <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <circle cx="100" cy="100" r="100" />
  </svg>
</div>

补充说明 #

• viewBox属性的作用是定义SVG的坐标系统和宽高比，配合默认的preserveAspectRatio="xMidYMid meet"，会让图形在可用空间内保持比例缩放，不会变形。
• 如果需要图形完全拉伸填充父元素（不保持原始比例），可以修改preserveAspectRatio属性为none：

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">

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