svg06-the relationship between coordinate transformation and order in svg

1. What is coordinate transformation

• In the svg, coordinate transformation is a coordinate system to described in another coordinate system, transform
• In the previous article, we said: transform is based on the precursor coordinate system own coordinate system transformation

Now let’s test it for . When both the 161a8ae426dd2e coordinate system and its predecessor coordinate system are transformed, what is the effect of the different order?

2. The relationship between coordinate transformation and order (coordinate system and precursor coordinate system)

1. Both the coordinate system and the precursor coordinate system do translation

<!-- 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 first translate(50, 0), rect then translate(0, 50):

g first translate(0, 50), rect then translate(50, 0)

When both the precursor coordinate system and the self-coordinate system do translation is the same for the self-coordinate system

2. Both the coordinate system and the precursor coordinate system do rotation

<!-- 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 first rotate(30), rect then rotate(15)

g first rotate(15), rect then rotate(30)

Precursor coordinate system with its own coordinate system do rotation transformation of its own coordinate system for result is the same

3. The coordinate system and the precursor coordinate system do one translation and one rotation

<!-- 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 first translate(0, 50), rect then rotate(30)

g first rotate(30), rect then translate(0, 50)

We found the difference! In order to see clearly, I hand-painted the transformation process

The size is inaccurate, forgive me! The shaded part is the effect of the rectangle in the screenshot above

Important: Any transformation of rect is based on the coordinate system of g that has been transformed by

3. What if two transformations of the same graph change the order?

1. It is worth mentioning that the transform in svg can be written in a chain, which is called in turn

For example: as can be seen in the figure below, the two translate(0, 50) are both effective and superimposed.

2. Through analysis, it is not difficult to know that the same graph:

• translates and swaps positions several times in a row, the result is the same
• rotates and exchanges positions several times in a row, the result is the same

3. Let's look at it separately, the translation and rotation exchange positions

<!-- 先平移再旋转： -->
<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>

First translate and then rotate:


Rotate first, then translate:


Everyone must have guessed this result. The principle is actually the same as that described above. The difference is that the two transformations are in its own coordinate system.

So when you perform translation and rotation at the same time later, you must pay attention to the effect of the order~

kk...Friday, have a nice weekend