一、什么是坐标变换

  • 在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...周五啦,周末愉快哦

03-05 22:49