preserveAspectRatio不设置宽高比，而是控制viewBox内容在容器中的缩放与对齐方式；其值由align（如xMidYMid）和meetOrSlice（meet默认完整显示，slice填满裁切）组成。
preserveAspectRatio 不是用来“设置宽高比”的，它真正干的事是：告诉浏览器——当 viewBox 和视口（width/height）尺寸不匹配时，图形内容该往哪摆、怎么缩。
对齐方式参数怎么选：xMinYMid 这类值到底对应什么位置
对齐参数由两部分拼成：x[Min|Mid|Max] 控制水平方向，y[Min|Mid|Max] 控制垂直方向。每个词都严格对应坐标系的锚点：
-
xMin：把viewBox的最左边缘（即viewBox的 x 起始值）对齐到视口左边缘 -
xMid：把viewBox的水平中点对齐到视口水平中点 -
xMax：把viewBox的最右边缘对齐到视口右边缘 -
yMin：viewBox顶部（y 起始值）对齐视口顶部 -
yMid：viewBox垂直中点对齐视口垂直中点 -
yMax：viewBox底部（y + height）对齐视口底部
比如 preserveAspectRatio="xMaxYMax" 就是右下角对齐；xMinYMid 是左对齐 + 垂直居中——常用于左侧固定图标的 SVG 容器。
meet 和 slice 的实际缩放行为差异在哪
这两个值只在对齐方式不是 none 时生效，它们决定缩放后是否完整显示全部 viewBox 内容：
立即学习“前端免费学习笔记（深入）”；
-
meet（默认）：按视口最小边等比缩放，确保整个viewBox都可见，可能留白。例如视口 300×100，viewBox="0 0 100 100"，会缩放到 100×100 放进 300×100 里，左右各空 100px -
slice：按视口最大边等比缩放，填满整个视口，超出部分被裁切。同样例子下，会放大到 300×300，然后只显示中间 300×100 区域，上下被切掉
注意：slice 不等于“拉伸”，它仍是等比缩放，只是加了裁切。要非等比压缩（如只压高度），必须配合 none ——但那就失去比例控制了。
为什么设置了 xMidYMid 还是没居中
常见原因不是写错了对齐值，而是被其他样式或属性覆盖了：
- 父容器用了
display: flex且没设align-items或justify-content，SVG 自身对齐失效 -
width和height设为100%但父元素没有明确尺寸（比如height: auto），导致视口计算异常 - 漏写了
viewBox属性——没有viewBox，preserveAspectRatio直接无效 - CSS 中给
<svg>加了vertical-align: baseline（默认值），造成视觉偏移，加vertical-align: top或middle可修复
最简验证法：临时加 style="border: 1px solid red;" 到 <svg> 上，看清视口边界和内容实际位置关系。
想让 SVG 水平保持比例、垂直允许挤压，能用 preserveAspectRatio 吗
不能直接做到。preserveAspectRatio 的所有合法值（包括 none）都不支持“单向非等比”。none 是完全取消比例约束，XY 都拉伸；meet/slice 都强制等比。
如果真需要这种效果（比如横屏图表保持宽度比例、高度随容器压缩），得绕开 preserveAspectRatio：
- 用 CSS
transform: scale(1, 0.5)手动压高度（但会缩放描边、文字等） - 改用
<div>+background-image: url(data:image/svg+xml,...)，再用background-size: contain / cover+background-position模拟对齐 - 动态 JS 计算缩放因子，重设
viewBox的 y 范围（比如从"0 0 100 100"改成"0 0 100 50"），再配合preserveAspectRatio="xMidYMid meet"
核心记住一点：preserveAspectRatio 是声明式对齐+缩放策略，不是变形工具。它的设计目标从来就不是支持非等比拉伸。
