1. Translation (Moving)
Translation involves moving an SVG element along the X and Y axes. It's like shifting an object's position on a plane. For instance, consider a rectangle SVG element:
<svg width="200" height="200">
<rect x="20" y="20" width="100" height="50" fill="blue" />
</svg>
To translate this rectangle 50 units to the right and 20 units down, you can use the transform attribute with the translate function:
<svg width="200" height="200">
<rect x="20" y="20" width="100" height="50" fill="blue" transform="translate(50, 20)" />
</svg>
In this example, the rectangle is translated 50 units to the right and 20 units down from its original position.
2. Rotation
Rotation involves rotating an SVG element around a specified point. For instance, rotating a rectangle by 45 degrees:
<svg width="200" height="200">
<rect x="20" y="20" width="100" height="50" fill="blue" transform="rotate(45, 70, 45)" />
</svg>
Here, the rotate function rotates the rectangle 45 degrees around the point (70, 45), which is the center of the rectangle.
3. Scaling (Resizing)
Scaling changes the size of an SVG element. It can be uniform (equal scaling in X and Y directions) or non-uniform (different scaling factors for X and Y). For example, scaling a circle uniformly to double its size:
<svg width="200" height="200">
<circle cx="50" cy="50" r="30" fill="green" transform="scale(2)" />
</svg>
This code scales the circle by a factor of 2, making it twice its original size.
4. Skewing (Distorting)
Skewing tilts an SVG element along the X or Y axis. It creates a slanted effect. For instance, skewing a rectangle along the X axis:
<svg width="200" height="200">
<rect x="20" y="20" width="100" height="50" fill="blue" transform="skewX(30)" />
</svg>
Here, the skewX function skews the rectangle by 30 degrees along the X axis.
Combining Transformations
You can combine multiple transformations using the transform attribute. For instance, rotating and scaling a triangle:
<svg width="200" height="200">
<polygon points="100,20 20,100 180,100" fill="yellow" transform="rotate(45, 100, 100) scale(1.5)" />
</svg>
This code rotates the triangle 45 degrees around the point (100, 100) and then scales it by a factor of 1.5.
Benefits and Considerations
- Dynamic Effects: Transformations make SVG elements dynamic, enhancing user experience.
- Responsive Design: They help create responsive designs by adjusting elements based on screen size.
- Complex Animations: Combined with animations, transformations can create complex visual effects.
Practice Excercise Practice now