preserveAspectRatio属性功能_HTML SVG宽高比保持策略解析

preserveAspectRatio 作用是控制 viewBox 内容在容器中如何缩放、对齐与裁切，而非设置宽高比；必须配合 viewBox 使用，align 决定定位（如 xMidYMid），meetOrSlice 决定适配策略（meet 完整显示留白，slice 填满裁切）。

preserveAspectRatio 的作用不是“让 SVG 变响应式”，而是**明确告诉浏览器：当 viewBox 和容器尺寸不匹配时，如何缩放、是否裁切、内容停在哪**。它不控制尺寸，只控制缩放策略和对齐逻辑。

为什么设置了 width/height 还会变形？

常见错误是只设了 svg 的 width 和 height，却没配 viewBox 或忽略了 preserveAspectRatio。此时浏览器按默认行为 xMidYMid meet 处理——但若你手动设了 viewBox="0 0 100 50" 却把容器拉成 width="300" height="300"，图形就会被等比缩放到短边适配（即按高度 50→300 缩放 6 倍，宽度只占 600px 中的 300px，左右留白），看起来“没填满”。这不是 bug，是 meet 的本意。

容易踩的坑：

• 删掉 viewBox 后 preserveAspectRatio 失效（该属性依赖 viewBox 存在）
• 用 CSS 设置 width: 100%; height: auto，但容器父级高度未定义，导致计算出的高度为 0
• 误以为 none 能“自由拉伸”，结果发现文字、描边粗细也跟着拉伸失真

meet 和 slice 的实际缩放逻辑差异

meet 按 viewBox 的宽高比，取容器可用宽高中的较小缩放比例；slice 取较大比例。例如 viewBox="0 0 200 100"（宽高比 2:1），容器是 400×400：

立即学习“前端免费学习笔记（深入）”；

• meet：高度方向需缩放 4 倍（100→400），宽度方向只需 2 倍（200→400），取小值 2 倍 → 实际渲染为 400×200，上下留白
• slice：取大值 4 倍 → 渲染为 800×400，横向超出容器 400px，左右被裁切

这和 background-size: contain/cover 行为一致，但注意：CSS 的 cover 不指定对齐点，默认居中；而 slice 必须配合 align（如 xMidYMid）才决定哪部分被裁。

对齐参数 xMinYMax 这类值怎么记？

不用死记，按两段拆解：xMin 是 X 方向左对齐（Min = 最小坐标值，即 0 边），YMax 是 Y 方向底对齐（Max = 最大坐标值，即 viewBox 高度边）。组合起来就是“左下角钉死”。常用组合：

• xMidYMid：居中（最常用）
• xMinYMin：左上角对齐（适合图标左对齐布局）
• xMaxYMax：右下角对齐（比如想确保某个按钮始终贴右下）
• none：彻底放弃比例约束，viewBox 内容会被拉伸填充整个容器，圆变椭圆、文字变胖

注意：none 下 meetOrSlice 部分被忽略，写成 none meet 和 none slice 效果一样。

CSS 与 preserveAspectRatio 谁说了算？

两者共存时，preserveAspectRatio 优先级更高。CSS 的 width/height 只负责定义容器尺寸（即 viewport），真正的缩放决策由 preserveAspectRatio + viewBox 完成。但有一个关键例外：如果用 CSS 设置了 transform: scale()，它会在 preserveAspectRatio 计算之后再叠加缩放，可能造成双重缩放或模糊。

真正容易被忽略的是：当你用 object-fit 包裹 <img src="icon.svg"> 时，preserveAspectRatio 依然生效，但 object-fit: cover 会覆盖其裁切行为——此时 SVG 内部的 slice 可能被浏览器二次裁切，结果不可控。稳妥做法是：内联 SVG 用 preserveAspectRatio，外部引用 SVG 尽量避免混用 object-fit。