一、什么是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 对应坐标系的值