viewBox四个数字定义逻辑取景框的坐标系：min-x和min-y设定原点位置，width和height确定逻辑画布宽高，共同决定图形缩放和平移映射关系。
viewBox 四个数字到底在算什么坐标
它不是“设置 SVG 宽高”，而是定义一个逻辑取景框：viewBox="min-x min-y width height"。这个框从无限画布中截出一块区域，再把它等比缩放填进 width 和 height 指定的容器里。
比如 ：内部所有坐标（cx="100"、d="M10 10"）都落在这个 200×100 的逻辑网格内；而浏览器会把这 200 单位宽度拉伸到 400px → x 方向缩放因子是 400 / 200 = 2，y 同理是 200 / 100 = 2。
关键点：min-x 和 min-y 是重设坐标系原点，不是平移图形。设成 -10 -10 120 120，相当于把 (0,0) 原点左移 10、上移 10，整个逻辑空间向外扩展一圈——这对描边溢出或动画预留空间很实用。
为什么改了 width/height 图形就变小/消失
因为缩放因子变了，但 viewBox 还卡在旧范围里。常见翻车场景：
- 复制别人图标代码，
viewBox="0 0 24 24"没改，但自己把width="200"→ 缩放因子变成200 / 24 ≈ 8.3，图形被放大撑出容器，只看到左上角一小块 - 删掉
width/height，浏览器用默认 300×150，而viewBox="0 0 1024 1024"→ 缩放因子 ≈ 0.3，图形缩成针尖大小 - 图形实际画在
x="300"，但viewBox="0 0 100 100"→ 它完全在取景框外，直接“消失”
快速验证：临时删掉 viewBox 属性，看原始图形位置和大小，再反推需要的 min-x、min-y、width、height 范围。
preserveAspectRatio 不只是居中，它决定缩放是否变形
它只在 viewBox 宽高比 ≠ 容器宽高比时才真正起作用。默认值 "xMidYMid meet" 是安全选项，但别以为它永远“正确”：
-
"xMidYMid meet"：保持宽高比，完整显示内容，可能上下/左右留白（推荐用于图标、UI 元素） -
"xMidYMid slice"：保持宽高比，填满容器，裁剪边缘（适合 banner、全屏背景） -
"none"：强制拉伸，x/y 缩放因子各自独立 → 图形压扁或拉长（慎用，path描边、文字都会失真）
容易被忽略的是：即使你写了 preserveAspectRatio，如果容器尺寸靠 CSS 百分比或 max-width 动态变化，而 viewBox 宽高比固定，那每次尺寸变化时，meet 或 slice 的裁剪/留白位置都会变——这不是 bug，是映射关系实时重算的结果。
path 的 d 值和描边粗细怎么跟着缩放
d 里所有数字都是用户单位，完全受 viewBox 控制。同一段 d="M10 10 L90 10"：
- 在
viewBox="0 0 100 100"下，是横跨 80% 宽度的一条线 - 在
viewBox="0 0 200 200"下，它只占 40% 宽度 —— 因为单位“变大”了
描边同理：stroke-width="1" 默认按用户单位计算。想让它始终是 1px 物理像素？加 vector-effect="non-scaling-stroke"，但注意 IE 不支持，且会破坏缩放一致性（比如 hover 放大时描边不随图形变粗）。
最稳的做法：把 viewBox 尺寸设得接近目标视觉尺寸（如图标常用 0 0 24 24），再通过 CSS 控制 width/height 缩放，这样 d 和 stroke-width 的数值直觉更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
