preserveAspectRatio 属性用于控制 SVG 内容在容器中的缩放与对齐方式，而非设置宽高比；其需配合 viewBox 使用，通过 align（如 xMidYMid）和 meetOrSlice（meet 为默认，完整显示；slice 为填满裁切）共同决定响应式适配行为。
SVG 的 preserveAspectRatio 属性不是用来“设置宽高比”的，而是控制 SVG 内容在容器中如何缩放和对齐，尤其在响应式场景下保持视觉比例和定位的关键机制。
preserveAspectRatio 的基本作用
当 SVG 的 viewBox 与容器（如 元素本身的 width/height）尺寸不匹配时，浏览器需要决定如何缩放图形。该属性就是告诉浏览器：
– 是否强制保持 viewBox 的宽高比（即“不拉伸”）
– 如果要保持，内容在容器中如何对齐（居中？靠左上？裁切还是留白？）
语法结构与常用值
格式为：preserveAspectRatio="align meetOrSlice"
其中：
-
align：指定对齐方式，如xMidYMid（水平垂直居中）、xMinYMax（左下对齐）、xMaxYMax（右下对齐）等；none表示取消宽高比约束，允许自由拉伸 -
meetOrSlice：仅在align ≠ none时生效
•meet（默认）：完整显示 viewBox 全部内容，按比例缩放到容器内，可能留白
•slice：填满整个容器，按比例缩放后裁切超出部分
例如：preserveAspectRatio="xMidYMid meet" 是最常用组合，实现居中、等比、不裁切的响应式展示。
配合 viewBox 实现真正响应式
仅设 preserveAspectRatio 不够，必须搭配 viewBox 才能生效：
-
viewBox="0 0 100 50"定义了坐标系逻辑宽高比（2:1） - 再用 CSS 设置
svg { width: 100%; height: auto; }或固定宽高比容器（如aspect-ratio: 2 / 1） - 此时
preserveAspectRatio才决定图形如何适配这个动态容器
没有 viewBox，preserveAspectRatio 将被忽略。
常见响应式陷阱与建议
实际开发中容易出问题的地方：
- 直接写
width和height属性（如width="300" height="150"）会覆盖 CSS 响应式效果，建议只用 CSS 控制尺寸 - 父容器未设置宽高或
display: inline可能导致 SVG 高度塌陷，可加vertical-align: top或设display: block - 想实现“全屏铺满且无裁切”，用
preserveAspectRatio="none"，但图形会变形——需确认设计是否允许 - 若需精确控制缩放锚点（比如图标始终从左上角对齐缩放），选
xMinYMin meet而非默认居中
不复杂但容易忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
