当父容器仅设置高度（如 `height: 24px`）而未设宽度时，svg 默认不会自动拉伸以适配该高度；需显式设置 `svg { height: 100%; width: auto; }` 才能使其响应式填充父高并保持宽高比。

在 Web 开发中，SVG 作为内联替换元素（replaced element），其尺寸行为与普通块级元素不同：它默认按 viewBox 定义的固有宽高比渲染，且不继承父容器的 height，除非显式声明 height 或 width 样式。这意味着，即使父

设置了 height: 24px，内部

✅ 正确解法是为 SVG 元素添加以下 CSS：

svg {
  height: 100%;
  width: auto;
}

该规则强制 SVG 高度严格匹配父容器高度，同时 width: auto 保证其按 viewBox 的宽高比自动计算宽度（例如 viewBox="0 0 24 24" 对应 1:1 比例，父高 24px → SVG 渲染为 24×24px）。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

⚠️ 注意事项：

• 不要设置 width: 100%（否则会忽略 viewBox 比例，导致变形）；
• 避免对 SVG 设置 display: block 以外的 display 值（如 inline）后未处理基线对齐，可能引发意外间隙；
• 若父容器使用 flex 布局，align-items: stretch 默认使子项拉伸高度，因此 SVG 在 flex 容器中“看似”自动生效——但这本质是 flex 的拉伸行为，而非 SVG 自身响应，仍建议显式加 height: 100% 以确保跨浏览器一致性；
• 在部分旧版 Safari 中，需额外添加 vertical-align: top 防止行内布局偏移。

? 总结：SVG 的尺寸控制核心在于 显式声明 height + width: auto，而非依赖父容器样式继承。这是响应式 SVG 图标、图标系统及设计系统中确保一致缩放的关键实践。