How Does the Order of SVG Transforms Affect the Resulting Shape Distortion?

Order of Transforms and the Resulting Distortion

In SVG, when a transform attribute is applied to an element, it obtains a copy of the current user coordinate system. The subsequent transforms are then applied in sequence, each modifying the coordinate system from its previous state.

This order of transformations significantly affects the final output. As noted in the specified quotes:

• Transformations are applied in the order they appear in the transform attribute.
• Each transformation affects the coordinate system based on the changes applied by preceding transformations.

Skewing Due to Transforms Sequence

Consider the example in the code provided, where two rectangles undergo transformations:

Rectangle 1: Scale(2, 1) then Rotate(10deg)
Rectangle 2: Rotate(10deg) then Scale(2, 1)

Rectangle 1 is distorted or skewed due to the specific order of the transforms. When the element undergoes scaling, its current coordinate system is first elongated horizontally. This new coordinate system is then rotated by 10 degrees. As a result, the rectangle is effectively skewed.

In contrast, Rectangle 2 is not skewed because of the reversed transform order. The initial rotation of 10 degrees modifies the coordinate system before scaling occurs. Therefore, the scaling simply elongates the rectangle along the new rotated axis, avoiding any distortion.

Technical Explanation

When scaling is applied first, the element's bounding box is enlarged or contracted. When the rotation transform is then applied, it occurs within this modified bounding box. This leads to the skewing effect as the rotation is applied to the scaled proportions.

Conversely, when rotation is applied first, it alters the orientation of the coordinate system. Subsequently, scaling is applied to this rotated system, ensuring that elongation or contraction occurs along the new axis, resulting in a non-skewed rectangle.

By understanding the order and interplay of transforms, it becomes clear why chaining transforms in different sequences can result in varying outcomes, as observed in this example.

The above is the detailed content of How Does the Order of SVG Transforms Affect the Resulting Shape Distortion?. For more information, please follow other related articles on the PHP Chinese website!