理解SVG的缩放、偏移的计算公式

SVG中DOM元素的偏移与缩放都是基于SVG元素的左上角，所以如何理解与计算SVG中元素的真实位置就比较难，下面的例子都以圆(circle)为例。

1.缩放

假定缩放的比例为s，执行缩放后，圆的圆心坐标由(cx, cy)变为(cx * s, cy * s)

2. 偏移

假定偏移的距离为(x1, y1), 执行单纯的偏移后，圆的圆心坐标由(cx, cy)变为(cx + x1, cy + y1)

3. 先偏移后缩放

先偏移后缩放的transform表达式为

transform="translate(100, 0) scale(2) "

则现在圆心的真实位置为(cx * s + x1, cy * s + y1)

4. 先缩放后偏移

先偏移后缩放的transform表达式为

transform="scale(2) translate(100, 0)"

则现在圆心的真实位置为((cx + x1) * s, (cy + y1) * s)

5. 示例代码

<svg width=