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 向下增大。你写的 中所有数值，都是在这个用户坐标系下测量的。
