Theory
Theory
Comments

Coordinate Systems and 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.

object.svg
style.css

SVG

CSS

svg { border: 2px solid teal; }

Goalscompleted

Assign the transform="rotate(45)" transform to the .bear group. The group content will rotate by 45 degrees, and the center of the transform will now be in the upper left corner of the viewport.
Now, before the rotation transform, add an offset transform: translate (200). The content of the group will first be shifted by 200 pixels horizontally, thus creating a new coordinate system, and the figure will rotate 45 degrees relative to it.

Coordinate Systems and Transforms

Comments

Log in

Sign up

Restore access