svg06 -- relationship between coordinate transformation and order in svg

1, What is coordinate transformation

  • In svg, coordinate transformation is a description of the transformation from one coordinate system to another
  • In the previous article, we said: transform is a self coordinate system transformation based on the precursor coordinate system

Now let's test for ourselves how the different order affects when the coordinate system and its precursor coordinate system are transformed

2, Relationship between coordinate transformation and sequence (coordinate system and precursor coordinate system)

1. Both the coordinate system and the precursor coordinate system are translated

<!-- g before translate(50, 0),rect again 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 before translate(0, 50),rect again 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 and then translate(0, 50):

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

When the precursor coordinate system and its own coordinate system are translated, the result is the same for its own coordinate system

2. Both the coordinate system and the precursor coordinate system rotate

<!-- g before rotate(30),rect again 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 before rotate(15),rect again 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 and then rotate(15)

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

When the precursor coordinate system and its own coordinate system are rotated, the result is the same for its own coordinate system

3. Make a translation and a rotation between the coordinate system and the precursor coordinate system

<!-- g before translate(0, 50),rect again 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 before rotate(30),rect again 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 and then rotate(30)

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

We found a difference! In order to see clearly, I drew the transformation process by hand

The size is not correct, 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

3, What if two transformations of the same figure change order?

1. It is worth saying that the transform in svg can be written in a chain and called in turn

For example, as can be seen from the following figure, the two translate(0, 50) transformations are effective and superimposed

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

  • Translate and exchange positions several times in succession, and the result is the same
  • Rotate the exchange position several times in succession, and the result is the same

3. Let's look at it alone. Translation and rotation exchange positions

<!-- Translate before rotate: -->
<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>
<!-- Rotate before translation -->
<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>

Translate before rotate:

Rotate before translate:

Everyone must have guessed this result. The principle is actually consistent with that described above. The difference is that both transformations are in their own coordinate system.

So when you translate and rotate at the same time, you must pay attention to the influence of order~

kk... Friday, have a nice weekend

Tags: Front-end css svg

Posted on Fri, 26 Nov 2021 10:57:10 -0500 by yurko