05——svg的坐标系统和坐标系

一、什么是svg的坐标系统

众所周知，数学上的坐标系统，大部分是指 笛卡尔直角坐标系

并且：x轴 向右，y轴 向上，角度为 逆时针

在svg中，坐标系统同样也是笛卡尔直角坐标系，x轴 向右

但是：y轴向下，角度为 顺时针

二、什么是svg的坐标系？

在svg中，共有4种坐标系：

• 用户 坐标系
• 自身 坐标系
• 前驱 坐标系
• 参考 坐标系

我们来逐个了解一下

1、用户坐标系

即世界坐标系，指的是最原始的svg坐标系

2、自身坐标系

图形 元素或 分组 本身具有 的坐标系
如下图，rect 的坐标系 与 svg坐标系 、用户坐标系都是重合的

3、前驱坐标系

即 父级 坐标系。
自身坐标系 不发生变换 的情况下，和前驱坐标系是重合的。

如下图，rect 变换后 自身坐标系 是 蓝色坐标系，前驱坐标系即 svg 的坐标系（与用户坐标系Ouser重合）

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 是 基于前驱坐标系 的 自身坐标系 的变换，所以变换是有先后顺序的，顺序改变，变换结果就会不同，有兴趣的可以看下一篇的简单例子