svg06——svg中坐标变换与顺序的关系

一、什么是坐标变换

  • 在svg中,坐标变换 是对 一个坐标系另一个坐标系 的变换的描述
  • 在上一篇中我们说到: transform 是 基于前驱坐标系自身坐标系 变换

现在我们来亲自试验下,坐标系 与 其前驱坐标系 都变换时,顺序不同有怎样的影响

二、坐标变换与顺序的关系(坐标系与前驱坐标系)

1、坐标系与前驱坐标系都做 平移



  
    
  



  
    
  
g 先 translate(50, 0),rect 再 translate(0, 50) :

svg06——svg中坐标变换与顺序的关系_第1张图片

g 先 translate(0, 50),rect 再 translate(50, 0)

svg06——svg中坐标变换与顺序的关系_第2张图片

前驱坐标系与自身坐标系都做 平移 变换时,对自身坐标系来说 结果是一样的

2、坐标系与前驱坐标系都做 旋转



  
    
  



  
    
  
g 先 rotate(30),rect 再 rotate(15)

svg06——svg中坐标变换与顺序的关系_第3张图片

g 先 rotate(15),rect 再 rotate(30)

svg06——svg中坐标变换与顺序的关系_第4张图片

前驱坐标系与自身坐标系都做 旋转 变换时,对自身坐标系来说 结果是一样的

3、坐标系与前驱坐标系做 一次平移 一次旋转



  
    
  



  
    
  
g 先 translate(0, 50),rect 再 rotate(30)

svg06——svg中坐标变换与顺序的关系_第5张图片

g 先 rotate(30),rect 再 translate(0, 50)

svg06——svg中坐标变换与顺序的关系_第6张图片

我们发现了不同!为了看的清楚,我手绘了变换过程

尺寸不准,见谅!阴影部分就是上面截图中矩形的效果

svg06——svg中坐标变换与顺序的关系_第7张图片

重要:rect 的任何变换都是基于已经变换了的 g 的坐标系

三、如果是同一图形的两个变换改变顺序呢?

1、值得说的是:svg中的 transform,是可以链式书写的,依次调用

例如:下图中可以看出,两次 translate(0, 50) 变换都是生效的,进行了叠加

svg06——svg中坐标变换与顺序的关系_第8张图片

2、通过分析我们不难得知,同一图形:

  • 连续多次平移 交换位置,结果是相同的
  • 连续多次旋转 交换位置,结果是相同的

3、我们单独看下,平移和旋转交换位置



  
    
  



  
    
  

先平移再旋转:
svg06——svg中坐标变换与顺序的关系_第9张图片

先旋转再平移:
svg06——svg中坐标变换与顺序的关系_第10张图片

大家肯定都猜到了这个结果,原理其实和上面描述的是一致的,区别是两次变换都在自身坐标系而已。

所以后面同时进行平移旋转的时候,一定要注意顺序的影响哦~

kk...周五啦,周末愉快哦

你可能感兴趣的