0
svg05——svg的坐标系统和坐标系
source link: https://segmentfault.com/a/1190000041018611
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
一、什么是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 是 基于前驱坐标系 的 自身坐标系 的变换，所以变换是有先后顺序的，顺序改变，变换结果就会不同，有兴趣的可以看下一篇的简单例子
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK