preserveaspectratio是控制svg内容缩放与对齐的必需属性，非可选项；默认值xmidymid meet确保等比居中且全部可见，而slice填满容器可能裁剪，none则强制拉伸失真。
preserveAspectRatio 控制 SVG 内容如何填满容器
它不是可选项，而是决定 viewBox 区域在 width/height 容器中缩放和对齐的开关。缺它时浏览器用默认值 xMidYMid meet，但一旦容器宽高比突变或你需要精确控制留白/裁剪，就必须显式设置。
meet 和 slice 的实际效果差异
meet 按短边缩放，确保全部内容可见，可能留白；slice 按长边缩放，填满容器但可能裁剪边缘。两者都保持等比缩放，只是策略不同。
-
preserveAspectRatio="xMidYMid meet"：居中 + 全部可见（最常用） -
preserveAspectRatio="xMidYMid slice"：居中 + 填满（适合背景图、全屏图标） -
preserveAspectRatio="none"：强制拉伸，完全丢弃比例——除非真要变形，否则别用 -
preserveAspectRatio="xMinYMin meet"：左上角对齐 + 全部可见，右侧/下方留白明显
为什么写了 viewBox 还是偏移或留白不均
viewBox 的宽高比必须和容器的宽高比一致，否则即使用了 meet，浏览器也会按规则留白或裁剪。常见错误是导出 SVG 时 viewBox 是 "0 0 24 24"，但硬写 width="48" height="36"，导致宽高比从 1:1 变成 4:3，内容自然右偏或下偏。
- 检查
viewBox四个值：前两个是原点，后两个是逻辑宽高，它们的比值要匹配容器 - 如果容器尺寸动态变化（如 flex 项），优先用
width="100%" height="auto"，让浏览器自动推算高度 - 若必须固定容器尺寸，给外层
<div> 加 <code>style="aspect-ratio: 1 / 1"（对应viewBox="0 0 24 24"）更可靠preserveAspectRatio 对描边和文字没用
它只管整体缩放和对齐，不解决
stroke-width或font-size随缩放变粗/变小的问题。这类失真需靠vector-effect="non-scaling-stroke"或 CSStransform: scale()单独处理。容易被忽略的是：即使 viewBox 和容器宽高比完全一致，
preserveAspectRatio仍决定内容是否居中、靠左还是靠顶——这点在图标嵌入按钮或卡片时，会直接影响视觉对齐精度。
