共计 726 个字符，预计需要花费 2 分钟才能阅读完成。
一、什么是 svg 的坐标零碎
家喻户晓，数学上的坐标零碎，大部分是指 笛卡尔直角坐标系
并且：x 轴 向右 ，y 轴 向上 ，角度为 逆时针
在 svg 中，坐标零碎同样也是笛卡尔直角坐标系，x 轴 向右
然而： y 轴向下 ，角度为 顺时针
二、什么是 svg 的坐标系？
在 svg 中，共有 4 种坐标系：
用户坐标系本身坐标系前驱坐标系参考坐标系
咱们来一一理解一下
1、用户坐标系
即世界坐标系，指的是最原始的 svg 坐标系
2、本身坐标系
图形 元素或 分组 自身具备 的坐标系
3、前驱坐标系
即 父级 坐标系。
本身坐标系 不产生变换 的状况下，和前驱坐标系是重合的。
如下图，rect 变换后本身坐标系是绿色局部，前驱坐标系即 svg 的坐标系（与用户坐标系重合）
4、参考坐标系
是一种 绝对 的概念，没有特指哪个坐标系。
比方下面的图中，用户坐标系也能够作为 rect 的参考坐标系，只是坐标值要依据理论状况从新计算。
三、综合实例
从头到尾顺一下思路
- svg 的坐标系为
OA，也是原始的用户坐标系 - 分组 B 的坐标系为
OB，translate(0, 50) 后，OB 坐标系整体下移 50 像素，留神是 OB 坐标系自身下移，而不是 OB 的内容下移 - rect C 的坐标系为
OC，宽高是本人的属性，x、y 则是绝对于本身坐标系 OC 的坐标值,OC 没有变换，所以与父级坐标系重合 - rect D 的坐标系为
OD，细节解释同 OC - 因为 C、D 没有 translate，所以 OB、OC、OD 重合
在这里就能够了解上一篇的疑难了：
上一篇的 rect 的 x、y 是绝对
本身坐标系的值，因为本身没有变换，所以 rect 坐标系与父级坐标系重合，也就是绝对父级 g 对应坐标系的值
重要的一点：transform 是 基于前驱坐标系 的 本身坐标系 的变换，所以变换是有先后顺序的，程序扭转，变换后果就会不同，有趣味的能够看下一篇的简略例子
正文完
