详细讲解SVG preserveAspectRatio属性，控制viewBox与视口宽高比不一致时的对齐和缩放方式。 当 viewBox 和视口的宽高比不一致时，SVG 怎么处理？这就需要
preserveAspectRatio属性。
preserveAspectRatio="align meetOrSlice"
两个参数：
保持宽高比，缩放到能完整显示在视口内。可能留白。
meet（默认）
完整显示，左右留白
meet
完整显示，上下留白
保持宽高比，缩放到填满视口。可能裁剪。
slice
填满视口，上下裁剪
slice
填满视口，左右裁剪
不保持宽高比，拉伸填满视口。
none
拉伸变形
对齐方式决定了 viewBox 在视口中的位置。
| 值 | 说明 |
|---|---|
| xMin | 左对齐 |
| xMid | 水平居中 |
| xMax | 右对齐 |
xMinYMid
xMidYMid
xMaxYMid
| 值 | 说明 |
|---|---|
| YMin | 顶部对齐 |
| YMid | 垂直居中 |
| YMax | 底部对齐 |
xMidYMin
xMidYMid
xMidYMax
左上角对齐，填满视口。
右下角对齐，填满视口。
用 slice 模式让图片填满容器，类似 CSS 的 background-size: cover。
<svg preserveAspectRatio="xMidYMid slice">
<!-- 图片会填满容器，可能裁剪 -->
</svg>
用 meet 模式确保 Logo 完整显示，居中对齐。
<svg preserveAspectRatio="xMidYMid meet">
<!-- Logo 完整显示，居中 -->
</svg>
用 none 模式让背景完全拉伸。
<svg preserveAspectRatio="none">
<!-- 完全拉伸，不考虑比例 -->
</svg>
如果不写 preserveAspectRatio，默认值是 xMidYMid meet。
<svg viewBox="0 0 100 100">
<!-- 等同于 preserveAspectRatio="xMidYMid meet" -->
</svg>
| 参数 | 值 | 效果 |
|---|---|---|
| 缩放 | meet | 完整显示，可能留白 |
| 缩放 | slice | 填满视口，可能裁剪 |
| 缩放 | none | 拉伸变形 |
| 对齐 | xMin/xMid/xMax | 左/中/右对齐 |
| 对齐 | YMin/YMid/YMax | 上/中/下对齐 |