SVG的坐标系统和viewport怎么理解

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既灵活又精准地响应不同屏幕和设计需求。