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

一、什么是坐标变换

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