关于svg:svg06svg中坐标变换与顺序的关系

一、什么是坐标变换

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