viewBox定义逻辑坐标系而非尺寸，语法为viewBox="min-x min-y width height"，其宽高比决定缩放行为；preserveAspectRatio控制对齐与裁剪方式；需配合CSS宽高设置及vector-effect确保缩放一致性。
viewBox 不是尺寸设置，是逻辑坐标系定义
很多人一上来就写 width="100%" height="100%"，结果图标糊了、变形了、只显示左上角——根本原因就是没理解 viewBox 的作用。它不控制 SVG 多大，而是告诉浏览器：“这组图形原本画在多大的逻辑画布上，原点在哪”。语法是 viewBox="min-x min-y width height"，其中 width 和 height 决定了原始宽高比，这个比值会直接影响后续缩放行为。
常见错误包括：
- 漏写
viewBox：SVG 退化成位图容器，width/height变成纯像素拉伸，矢量优势全丢 -
viewBox="0 0 100 100"但内部x=200外：内容被裁掉，只看到空白 - 设了
viewBox="0 0 24 24"却又写width="200px" height="100px"：宽高比强行压成 2:1，图形被横向拉宽或纵向压缩
正确做法是让 viewBox 精确包裹图形实际范围。比如图标设计稿是 24×24 像素，就用 viewBox="0 0 24 24"；若图形从 (50, 20) 开始、宽 300 高 200，就该写 viewBox="50 20 300 200"。
preserveAspectRatio 控制“怎么填满”和“填不满时怎么办”
preserveAspectRatio 不是可选项，它是缩放行为的开关。即使 viewBox 和容器宽高比完全一致，它仍决定内容对齐位置（左/中/右、顶/中/底）以及是否允许裁剪。
它的值由两部分组成：[对齐方式] [meet|slice]，常用组合有：
-
preserveAspectRatio="xMidYMid meet"（默认）：等比缩放 + 居中 + 完整显示，可能上下或左右留白 -
preserveAspectRatio="xMidYMid slice"：等比缩放 + 居中 + 填满容器，超出部分被裁剪 -
preserveAspectRatio="none"：强制非等比拉伸，x/y 缩放因子不同，图形必然扭曲，慎用
九宫格对齐部分（如 xMinYMin、xMaxYMax）影响的是“留白方向”或“裁剪方向”。例如仪表盘图表需要左对齐顶部且不裁剪，就选 xMinYMin meet；全屏背景图要撑满且允许裁剪，就用 xMidYMid slice。
CSS width/height 与 viewBox 必须配合，不能只写一半
只设 width="100%" 却不设 height，或者反过来，是最容易踩的坑。浏览器需要至少一个明确尺寸作为缩放基准，否则可能按默认 300×150 渲染，导致图形极小或极大。
推荐写法是：
- HTML 层面只写
width="100%"，省略height，让浏览器按viewBox宽高比自动推算高度（即height="auto"） - 或用 CSS 控制：
svg { width: 100%; height: auto; }，更灵活且便于响应式断点干预 - 若需固定容器比例（如 16:9），父容器加
aspect-ratio: 16 / 9，SVG 内部仍保持width="100%" height="100%"和合理viewBox
注意：父容器必须有明确宽度（比如 div { width: 80%; }），否则 width: 100% 没参照，SVG 可能塌陷。
缩放后文字和描边失真？那是 vector-effect 没配
就算 viewBox 和 preserveAspectRatio 全对，SVG 缩放到小尺寸时描边变粗、大尺寸时文字发虚，这是默认渲染行为——描边粗细和字体大小是按用户坐标系固定的，不随缩放重算。
解决方法不是调 font-size 或 stroke-width，而是加这个属性：
- 对描边：在
vector-effect="non-scaling-stroke"，让描边始终以 1px（视觉上）呈现 - 对文字：目前无原生 CSS 属性能自动缩放
font-size，得靠 JS 监听容器尺寸变化后动态计算，或改用transform: scale()配合dominant-baseline和text-anchor微调基线
这点常被忽略：viewBox 解决的是“图形是否等比”，而 vector-effect 解决的是“描边和文字是否看起来一致”。两者缺一不可，尤其在图标系统或数据图表中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
