6. Intermediate Topics: Transformations

Transformations are crucial for positioning, resizing, and reorienting SVG elements. Instead of manually recalculating coordinates, you can apply geometric transformations like moving, rotating, scaling, and skewing to elements or groups. These can be applied using the transform attribute directly on SVG elements or via CSS transform properties.

6.1 The transform Attribute

The transform attribute can be applied to any SVG element (or <g> element) and takes one or more transformation functions as its value. Transformations are applied in the order they are listed.

Here are the most common transformation functions:

• translate(tx, ty): Moves the element by tx units horizontally and ty units vertically. ty is optional and defaults to 0.
• rotate(angle cx cy): Rotates the element by angle degrees around a specific point (cx, cy). If cx and cy are omitted, the rotation is around the origin (0,0) of the current user coordinate system.
• scale(sx, sy): Resizes the element by a factor of sx horizontally and sy vertically. If sy is omitted, it defaults to sx, resulting in uniform scaling.
• skewX(angle): Skews the element horizontally by angle degrees.
• skewY(angle): Skews the element vertically by angle degrees.
• matrix(a b c d e f): The most general (and complex) transformation, applying a 2x3 transformation matrix. This is what all other transformations ultimately boil down to.

Let’s look at examples for each.

6.2 translate(tx, ty): Moving Elements

Moves an element along the X and Y axes.

Example:

<svg width="300" height="150" viewBox="0 0 300 150">
    <rect x="10" y="10" width="50" height="50" fill="red" />

    <!-- Moves the rectangle 100 units right, 30 units down -->
    <rect
        x="10"
        y="10"
        width="50"
        height="50"
        fill="blue"
        transform="translate(100, 30)"
    />

    <!-- Moves the rectangle 200 units right (ty defaults to 0) -->
    <rect
        x="10"
        y="10"
        width="50"
        height="50"
        fill="green"
        transform="translate(200)"
    />
</svg>

6.3 rotate(angle cx cy): Rotating Elements

Rotates an element around a specified point. The default rotation origin is (0,0).

Example:

<svg width="300" height="200" viewBox="0 0 300 200">
    <!-- Original square -->
    <rect x="50" y="50" width="100" height="100" fill="red" opacity="0.5" />

    <!-- Rotated 45 degrees around its own center -->
    <!-- The center of the square is (50 + 100/2, 50 + 100/2) = (100, 100) -->
    <rect
        x="50"
        y="50"
        width="100"
        height="100"
        fill="blue"
        transform="rotate(45 100 100)"
    />

    <!-- Rotated 90 degrees around the SVG origin (0,0) -->
    <rect
        x="50"
        y="50"
        width="100"
        height="100"
        fill="green"
        transform="rotate(90)"
        opacity="0.5"
    />
</svg>

Important: The order of translate and rotate matters!

• transform="translate(100,0) rotate(45)": Moves, then rotates. Rotation happens around (0,0) of the new translated coordinate system.
• transform="rotate(45) translate(100,0)": Rotates, then moves. Rotation happens around (0,0) of the original coordinate system.

6.4 scale(sx, sy): Resizing Elements

Changes the size of an element.

Example:

<svg width="300" height="150" viewBox="0 0 300 150">
    <!-- Original circle -->
    <circle cx="50" cy="75" r="30" fill="red" opacity="0.5" />

    <!-- Scales uniformly by 1.5, effectively r=45 -->
    <circle cx="50" cy="75" r="30" fill="blue" transform="scale(1.5)" />

    <!-- Scales by 2 horizontally, 0.5 vertically -->
    <circle
        cx="50"
        cy="75"
        r="30"
        fill="green"
        transform="translate(100,0) scale(2, 0.5)"
    />
</svg>

Note on Scaling: Scaling always happens relative to the origin (0,0). If you want to scale an object around its own center, you’ll often combine translate, scale, and translate again:

1. translate(-cx, -cy): Move the object so its center is at (0,0).
2. scale(s): Scale it.
3. translate(cx, cy): Move it back to its original position.

Or, use CSS transform-origin!

6.5 skewX(angle) and skewY(angle): Slanting Elements

Skews an element along the X or Y axis.

Example:

<svg width="300" height="150" viewBox="0 0 300 150">
    <rect x="20" y="20" width="80" height="80" fill="red" />

    <!-- Skew X by 30 degrees -->
    <rect
        x="20"
        y="20"
        width="80"
        height="80"
        fill="blue"
        transform="translate(100,0) skewX(30)"
    />

    <!-- Skew Y by 20 degrees -->
    <rect
        x="20"
        y="20"
        width="80"
        height="80"
        fill="green"
        transform="translate(200,0) skewY(20)"
    />
</svg>

6.6 Combining Transformations

You can apply multiple transformations by listing them sequentially in the transform attribute. They are applied from left to right.

Example:

<svg width="300" height="200" viewBox="0 0 300 200">
    <rect x="10" y="10" width="50" height="50" fill="red" opacity="0.5" />

    <!-- Scale by 1.5, then rotate by 45 degrees around its own center -->
    <rect
        x="10"
        y="10"
        width="50"
        height="50"
        fill="blue"
        transform="scale(1.5) rotate(45 35 35)"
    />

    <!-- Translate 150 units, then rotate 30 degrees around the center of the translated rectangle -->
    <rect
        x="10"
        y="10"
        width="50"
        height="50"
        fill="green"
        transform="translate(150, 0) rotate(30 35 35)"
    />

    <!-- Rotate 30 degrees around origin, then translate 150 units -->
    <rect
        x="10"
        y="10"
        width="50"
        height="50"
        fill="purple"
        transform="rotate(30) translate(150, 0)"
    />
</svg>

Notice the difference between the green and purple rectangles – the order truly matters!

6.7 Transformations with CSS

Modern CSS provides powerful transform properties that work on SVG elements. This often offers more flexibility, especially with transform-origin and for animations/transitions.

CSS transform properties:

• transform: translateX(value)
• transform: translateY(value)
• transform: rotate(angle)
• transform: scale(value)
• transform: scaleX(value)
• transform: scaleY(value)
• transform: skewX(angle)
• transform: skewY(angle)
• transform-origin: Crucially, this CSS property allows you to define the point around which transformations (especially rotate and scale) occur. You can specify it with percentages, pixels, or keywords (e.g., center, top left). This simplifies scaling/rotation around an element’s center.

Example with CSS:

<svg width="300" height="200">
    <style>
        .rect-rotate {
            fill: tomato;
            transition: transform 0.5s ease-in-out;
            transform-origin: 50% 50%; /* Rotate around its own center */
        }
        .rect-rotate:hover {
            transform: rotate(180deg) scale(1.2);
        }

        .circle-scale {
            fill: gold;
            transform-origin: 50px 50px; /* Rotate/scale around a specific point */
            transition: transform 0.4s ease;
        }
        .circle-scale:hover {
            transform: scale(1.5);
        }
    </style>

    <rect x="10" y="10" width="80" height="80" class="rect-rotate" />
    <circle cx="150" cy="50" r="30" class="circle-scale" />
</svg>

Exercises/Mini-Challenges

1. Spinning Sun/Gear:

   • Create a simple sun-like shape (a circle with some rays, perhaps polygons) or a gear icon.
   • Use CSS animation with transform: rotate() to make it continuously spin.
   • Experiment with transform-origin to ensure it spins around its true center.

2. Interactive Cards:

   • Draw three simple rectangles representing cards.
   • On hover, make each card perform a different transformation:
     • Card 1: translateY slightly upwards.
     • Card 2: scale slightly larger.
     • Card 3: rotate a small amount and translate a bit.
   • Use CSS transitions for smooth effects.

3. Bouncing Ball (Animated translate):

   • Draw a circle.
   • Use CSS keyframes animation to make the circle “bounce” up and down using transform: translateY().
   • Experiment with ease-in and ease-out timing functions to make the bounce look more natural.

4. Creating a “Play” Triangle:

   • Draw a triangle using <polygon>.
   • Use scale and skew transformations on multiple <polygon> elements or one <polygon> inside a <g> with transformations to create a cool, stylized “Play” button icon that looks like it’s in perspective or has depth.

5. Traffic Cone:

   • Create a traffic cone shape using a combination of rectangles and a polygon.
   • Use skewX on a rectangle to make the sides of the cone appear angled.
   • Use translate to stack the elements correctly.