如何让 SVG 在仅设置父容器高度时正确缩放

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

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

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

⚠️ 注意事项：

• 不要设置 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 图标、图标系统及设计系统中确保一致缩放的关键实践。