viewBox:SVG 自带的相机
SVG 有两套尺寸。width/height 是元素在页面上占的窗口（viewport,CSS 像素）;viewBox="min-x min-y w h" 在窗口里架了一台相机，决定「拍下用户坐标系的哪一块、放多大」。改 w/h = 推拉镜头（缩放）；改 min-x/min-y =
平移取景框。绘图坐标和显示像素就此解耦。
1 · 拖动相机的四个值
外面靛蓝紫实线框是固定的 viewport（240 × 180 像素）；里面的房子画在 user 坐标 。拖滑块看相机怎么动：
**缩放倍数 = viewport ÷ viewBox。**把 width 从 120 拖到 60，相机只「拍」60 个 user 单位却仍铺满 240 像素 → 内容放大 2 倍 (240/60)。描边也跟着变粗——勾上 non-scaling-stroke，描边宽度就按屏幕像素算、不再随相机缩放，地图线 / 图标常用。
2 · preserveAspectRatio：宽高比不符时怎么贴？
当 viewBox 的宽高比 ≠ viewport 的宽高比，浏览器得决定怎么塞。这里 viewport 是
（扁）,viewBox 是 0 0 100 100（正方）。和 CSS object-fit 是同一套思想：meet = contain（整图可见、留白）,slice = cover（填满、裁掉溢出）；前缀九种 align 决定往哪靠。
看四个橙角： meet 时方形图缩到 150 高、左右留白，四角都在；切 slice 它被放大到铺满 220 宽，上下溢出的部分被裁掉——align 选 YMin 就保住顶边两角、裁底边。xMidYMid meet 是默认值，也是
<img> 那种「居中完整显示」的来源。
3 · 嵌套：每个 viewBox 建立一套自己的坐标系
<symbol> 和嵌套的 <svg> 都能带自己的 viewBox，相当于在父坐标系里开一扇新窗、重新定义内部的 user 单位。这正是 嵌入矩阵一页 sprite 中每个 <use> 都能独立缩放贴合的原因。