SVG中translate变换的本质是移动局部坐标系原点而非图形本身；transform="translate(x,y)"使后续绘图坐标均相对于父坐标系(x,y)点计算，且复合变换按从右到左顺序执行。
SVG中的translate变换不是“把图形移到某个绝对坐标”，而是**以当前坐标系原点为基准，整体平移整个局部坐标系**。理解这一点，就抓住了偏移逻辑的核心。
translate(x, y) 的本质是移动坐标系原点
调用 transform="translate(30, 20)" 并不表示“把图形向右30、向下20”，而是说：**从此刻起，这个元素内部绘图所用的 (0,0) 点，被挪到了父坐标系的 (30,20) 位置**。所有后续绘制（比如 <circle cx="10" cy="5"></circle>）中的坐标，都是相对于这个新原点计算的。
- 未加 translate 时：
<circle cx="10" cy="5"></circle>的圆心在父坐标系 (10, 5) - 加了
translate(30, 20)后：<circle cx="10" cy="5"></circle>的圆心实际落在父坐标系 (30+10, 20+5) = (40, 25)
复合变换中 translate 的顺序至关重要
SVG 变换按从右到左（或从后往前）的顺序应用。例如：transform="rotate(45) translate(100, 0)" 表示先平移再旋转；而 transform="translate(100, 0) rotate(45)" 是先旋转再平移——结果完全不同。
-
translate(100,0) rotate(45)：先绕原点转45°，再把整个旋转后的坐标系沿新 x 轴方向平移100单位（路径是斜向的） -
rotate(45) translate(100,0)：先平移到 (100,0)，再绕该点（即新原点）旋转45°，图形会绕自身中心旋转
嵌套 元素时，translate 影响作用域内的全部子元素
对一个 <g></g> 应用 translate，等于为它内部所有子元素统一重设了坐标系原点。这比逐个给每个形状加 transform 更简洁高效。
立即学习“前端免费学习笔记（深入）”；
例如：
<g transform="translate(50, 30)"> <rect x="0" y="0" width="20" height="10"/> <circle cx="10" cy="5" r="3"/> </g>
矩形左上角和圆形圆心，在画布上的真实位置分别是 (50, 30) 和 (60, 35)。
注意：translate 不改变元素自身的 x/y/cx/cy 属性值
DOM 中读取 element.getAttribute('cx') 仍是原始值；视觉位置是变换叠加的结果。若需获取屏幕坐标，要用 getBBox() 或 getCTM().inverse() 配合 svg.getScreenCTM() 计算，不能直接加 translate 值。
- 属性值（如 cx="10"）始终是相对当前
transform所定义坐标系的局部坐标 - 浏览器渲染时，自动将局部坐标乘以当前变换矩阵，得出最终像素位置
