viewport是SVG的显示舞台，决定渲染尺寸；用户坐标系是绘图用的尺子，原点在左上角；viewBox是取景框，定义截取区域并控制缩放与平移。
SVG的坐标系统和viewport是理解图形定位、缩放与显示效果的基础。简单说：viewport是“窗口大小”，决定SVG在页面上占多大地方；坐标系统（尤其是用户坐标系）定义了图形画在哪、怎么量尺寸，而viewBox是连接这两者的“取景框”——它告诉浏览器：从无限大的SVG画布中，截取哪一块区域，再按什么比例放进viewport里。
viewport 是 SVG 的“显示舞台”
viewport 就是 根元素的 width 和 height 属性所定义的矩形区域，单位可以是 px、cm、em、% 等。它决定了SVG内容最终在页面上渲染出来的物理尺寸（比如 400×300 像素），超出这个范围的内容会被裁剪（clipped），不可见。
- 不写 width/height 时，浏览器通常按默认值（如 300×150 px）或继承父容器尺寸处理
- 带单位更可控：例如
会随设备DPI自适应物理尺寸 - viewport 本身不改变图形内部坐标，只划定“可见边界”
用户坐标系（User Coordinate System）是绘图的“尺子”
默认情况下，SVG使用左上角为原点 (0,0) 的笛卡尔坐标系，X 向右增大，Y 向下增大。你写的
- 这个坐标系默认和 viewport 像素一一对应（1 单位 = 1 像素），但可通过
viewBox改变映射关系 - 每个嵌套的
或 - transform 属性（如 translate/scale）作用于当前用户坐标系，不影响 viewport 本身
viewBox 是“取景+缩放”的控制中心
viewBox="x y width height" 定义了一个矩形区域（在用户坐标系中），它会被拉伸或适配到整个 viewport 内。它不改变图形实际坐标，只改变“怎么看到它”。
- 例如
表示：把用户坐标系中宽400高200的区域，压缩填满200×100的viewport → 整体缩小为 0.5 倍 - 若 viewBox 宽高比与 viewport 不同，
preserveAspectRatio决定如何对齐和是否保持比例（如none拉伸变形，xMidYMid meet居中等比缩放） - viewBox 的 x/y 值还能实现平移效果：比如
viewBox="-50 -20 200 150"相当于把画面向左上“推”出一部分，露出原本在左上角外的内容
三者关系一句话总结
viewport 设定舞台大小，viewBox 指定从无限画布中取哪一帧并怎么缩放，用户坐标系则是你在图纸上标尺寸用的那把尺子——三者配合，才能让SVG既灵活又精准地响应不同屏幕和设计需求。
