Interactive online courses HTML Academy
2026-03-09 14:10 Diff
https://htmlacademy.org/courses/svg-basics/svg-dimensions/coordinate-transforms

Transforms also create their own coordinate system. To apply a transform to all content, wrap it in a group (<g> element):

<svg width="350" height="200"> <g> … </g> </svg>

And add a transform:

<svg width="350" height="200"> <g transform="translate(50, 50)"> … </g> </svg>

All content has now shifted by 50 pixels vertically and horizontally together with the coordinate system, and if we now add another transform, it will be calculated using the new coordinate system:

<svg width="350" height="200"> <g transform="translate(50, 50) rotate(15)"> … </g> </svg>

In SVG, the default pivot point is 0,0. Before the first transform, it was the upper left corner of the viewport, but after the transform, it has become the upper left corner of the transformable content. The second transform will again change the coordinate system for the group.

This assignment uses SVG transforms. Of course, you can learn a lot about CSS transforms in the “2D Transforms” section.