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）才决定哪部分被裁。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
对齐参数 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。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
