一、什么是坐标变换
- 在svg中,
坐标变换
是对一个坐标系
到另一个坐标系
的变换的描述 - 在上一篇中我们说到: transform 是
基于前驱坐标系
的自身坐标系
变换
现在我们来亲自试验下,坐标系 与 其前驱坐标系
都变换时,顺序不同有怎样的影响
二、坐标变换与顺序的关系(坐标系与前驱坐标系)
1、坐标系与前驱坐标系都做 平移
<!-- g 先 translate(50, 0),rect 再 translate(0, 50) -->
<svg width="300" height="200">
<g transform="translate(50, 0)">
<rect x="0" y="0" width="100" height="50" transform="translate(0, 50)" fill="pink"></rect>
</g>
</svg>
<!-- g 先 translate(0, 50),rect 再 translate(50, 0) -->
<svg width="300" height="200">
<g transform="translate(0, 50)">
<rect x="0" y="0" width="100" height="50" transform="translate(50, 0)" fill="pink"></rect>
</g>
</svg>
g 先 translate(50, 0),rect 再 translate(0, 50) :
g 先 translate(0, 50),rect 再 translate(50, 0)
前驱坐标系与自身坐标系都做 平移
变换时,对自身坐标系来说 结果是一样的
2、坐标系与前驱坐标系都做 旋转
<!-- g 先 rotate(30),rect 再 rotate(15) -->
<svg width="300" height="200">
<g transform="rotate(30)" x="50" y="50">
<rect x="0" y="0" width="100" height="50" transform="rotate(15)" fill="pink"></rect>
</g>
</svg>
<!-- g 先 rotate(15),rect 再 rotate(30) -->
<svg width="300" height="200">
<g transform="rotate(15)">
<rect x="0" y="0" width="100" height="50" transform="rotate(30)" fill="pink"></rect>
</g>
</svg>
g 先 rotate(30),rect 再 rotate(15)
g 先 rotate(15),rect 再 rotate(30)
前驱坐标系与自身坐标系都做 旋转
变换时,对自身坐标系来说 结果是一样的
3、坐标系与前驱坐标系做 一次平移
一次旋转
<!-- g 先 translate(0, 50),rect 再 rotate(30) -->
<svg width="300" height="200">
<g transform="translate(0, 50)" x="50" y="50">
<rect x="0" y="0" width="100" height="50" transform="rotate(30)" fill="pink"></rect>
</g>
</svg>
<!-- g 先 rotate(30),rect 再 translate(0, 50) -->
<svg width="300" height="200">
<g transform="rotate(30)">
<rect x="0" y="0" width="100" height="50" transform="translate(0, 50)" fill="pink"></rect>
</g>
</svg>
g 先 translate(0, 50),rect 再 rotate(30)
g 先 rotate(30),rect 再 translate(0, 50)
我们发现了不同!为了看的清楚,我手绘了变换过程
尺寸不准,见谅!阴影部分就是上面截图中矩形的效果
重要:rect 的任何变换都是基于已经变换了的 g 的坐标系
三、如果是同一图形的两个变换改变顺序呢?
1、值得说的是:svg中的 transform,是可以链式书写的,依次调用
例如:下图中可以看出,两次 translate(0, 50)
变换都是生效的,进行了叠加
2、通过分析我们不难得知,同一图形:
连续多次平移
交换位置,结果是相同的连续多次旋转
交换位置,结果是相同的
3、我们单独看下,平移和旋转交换位置
<!-- 先平移再旋转: -->
<svg width="300" height="200">
<g>
<rect x="0" y="0" width="100" height="50" transform="translate(0, 50) rotate(30)" fill="pink"></rect>
</g>
</svg>
<!-- 先旋转再平移 -->
<svg width="300" height="200">
<g>
<rect x="0" y="0" width="100" height="50" transform="rotate(30) translate(0, 50)" fill="pink"></rect>
</g>
</svg>
先平移再旋转:
先旋转再平移:
大家肯定都猜到了这个结果,原理其实和上面描述的是一致的,区别是两次变换都在自身坐标系而已。
所以后面同时进行平移旋转的时候,一定要注意顺序的影响哦~
kk...周五啦,周末愉快哦