06——svg中坐标变换与顺序的关系_随笔

06——svg中坐标变换与顺序的关系一、什么是坐标变换

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

二、坐标变换与顺序的关系（坐标系与前驱坐标系） 1、坐标系与前驱坐标系都做平移

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

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

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

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

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

前驱坐标系与自身坐标系都做旋转变换时，对自身坐标系来说结果是一样的 3、坐标系与前驱坐标系做一次平移一次旋转

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

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

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

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

重要：rect 的任何变换都是基于已经变换了的 g 的坐标系三、如果是同一图形的两个变换改变顺序呢？ 1、值得说的是：svg中的 transform，是可以链式书写的，依次调用

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

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

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

先平移再旋转：

先旋转再平移：

大家肯定都猜到了这个结果，原理其实和上面描述的是一致的，区别是两次变换都在自身坐标系而已。所以后面同时进行平移旋转的时候，一定要注意顺序的影响哦~

kk…周五啦，周末愉快哦

欢迎分享，转载请注明来源：内存溢出

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