Why Does Transform Order Matter in SVG: Scale/Rotate vs. Rotate/Scale?

Significance of Transform Order: Why Rotate/Scale Differs from Scale/Rotate

Chaining transformations in SVG involves applying a series of transformations in the specified order to alter the coordinate system of an element. This order can significantly impact the resulting shape.

The SVG specification emphasizes that each transformation is applied to the current coordinate system, which is a "copy" of the initial one. When this coordinate system is scaled, a subsequent rotation occurs around the scaled origin. This explains why, in the given example, the first rectangle (transformed as scale(2, 1) rotate(10deg)) appears skewed.

Consider the initial coordinate system as a square. Scaling (2, 1) stretches it horizontally, doubling its width. When we then rotate by 10 degrees, the rotation takes place around the scaled width and height, resulting in the vertices being spread out differently, creating a skewed effect.

On the other hand, when we rotate first (rotate(10deg) scale(2, 1)) like in the second rectangle, the rotation occurs around the initial origin, without being affected by the scaling that follows. This results in a rectangle simply scaled up without any skewing.

This variance showcases the crucial role of transform order when chaining transformations. It's essential to understand how each transformation affects the coordinate system to achieve the desired outcome.

The above is the detailed content of Why Does Transform Order Matter in SVG: Scale/Rotate vs. Rotate/Scale?. For more information, please follow other related articles on the PHP Chinese website!