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

一、什么是svg的坐标系统

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

并且:x轴 向右,y轴 向上,角度为 逆时针

svg05——svg的坐标系统和坐标系_第1张图片

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

但是:y轴向下,角度为 顺时针
svg05——svg的坐标系统和坐标系_第2张图片

二、什么是svg的坐标系?

在svg中,共有4种坐标系:
  • 用户 坐标系
  • 自身 坐标系
  • 前驱 坐标系
  • 参考 坐标系

我们来逐个了解一下

1、用户坐标系

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

svg05——svg的坐标系统和坐标系_第3张图片

2、自身坐标系

图形 元素或 分组 本身具有 的坐标系
svg05——svg的坐标系统和坐标系_第4张图片

3、前驱坐标系

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

如下图,rect 变换后自身坐标系是绿色部分,前驱坐标系即svg的坐标系(与用户坐标系重合)

svg05——svg的坐标系统和坐标系_第5张图片

4、参考坐标系

是一种 相对 的概念,没有特指哪个坐标系。
比如上面的图中,用户坐标系也可以作为 rect 的参考坐标系,只是坐标值要根据实际情况重新计算。

三、综合实例

svg05——svg的坐标系统和坐标系_第6张图片

从头到尾顺一下思路

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

你可能感兴趣的