svg坐标映射由viewbox与width/height共同决定缩放对齐关系，而非固定像素换算；viewbox定义逻辑坐标系范围，width/height指定显示区域大小，preserveaspectratio控制缩放方式，用户单位无固有物理尺寸。
SVG 的坐标系统与用户单位的映射，本质是通过 viewBox 和 width/height（或 CSS 尺寸）共同定义的缩放与对齐关系，而非固定像素换算。
viewBox 决定逻辑坐标范围
viewBox="x y width height" 定义了 SVG 内部的“用户坐标系”原点和尺寸范围。例如 viewBox="0 0 200 100" 表示：内部所有绘图（如 <circle cx="100" cy="50"></circle>）都基于这个 200×100 的逻辑网格，(0,0) 是左上角，x 向右递增，y 向下递增——这是标准 SVG 坐标系。
width/height（或 CSS 尺寸）决定显示区域大小
SVG 元素的 width 和 height 属性（或通过 CSS 设置的宽高）指定了它在页面中实际占据的**设备独立像素（CSS pixels）** 区域。例如：<svg width="400" height="200" viewbox="0 0 200 100"></svg>
此时，内部 200 单位宽度被拉伸填满 400px 宽度 → 每个用户单位 = 2 CSS pixels（x 方向缩放因子为 2）；同理 y 方向也是 2。
preserveAspectRatio 控制缩放方式与对齐
默认值 preserveAspectRatio="xMidYMid meet" 表示：保持宽高比，居中显示，完整呈现 viewBox 内容（可能留白）。若改为 "none"，则强制拉伸填充，导致坐标映射发生非均匀缩放（x、y 缩放因子不同），图形会变形。
- 缩放因子 = SVG 显示宽度 / viewBox 宽度（x 方向）
- 缩放因子 = SVG 显示高度 / viewBox 高度（y 方向）
- 当
preserveAspectRatio不为"none"时，实际生效的缩放因子取二者较小值（meet）或较大值（slice）
用户单位没有固有物理尺寸
SVG 中的“1 user unit”本身不等于 1px、1cm 或 1pt——它只是一个抽象量纲。其物理表现完全取决于上述映射计算结果。例如：<svg width="10cm" height="5cm" viewbox="0 0 100 50"></svg>
此时 1 用户单位 = 0.1cm（x 方向），即 100 user units → 10cm → 每单位 0.1cm。
只要 viewBox 和外部尺寸确定，映射就唯一确定；修改任一参数都会改变坐标到屏幕像素的对应关系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
