Transformation in SVG-tutorial
SVG allows you to transform elements by translating, rotating, scaling, skewing, or even animating them. This makes your graphics dynamic, interactive, and visually engaging.
Example:
The rectangle is moved 100px right and 50ps down.
Output:
.webp)
Example:
The rectangle is rotated 45 degrees around the center point (200, 200).
Output:
.webp)
Example:
The rectangle becomes 1.5x wider and half as tall.
Output:
.webp)
Syntax:
Example:
The rectangle is slanted horizontally by 30 degrees.
Output:
.webp)
The rectangle rotates 360 degrees continuously around the point (200, 200) every 5 seconds.
Output:
1. Translation (Move)
Use: Moves an element from its original position.
Syntax:
Use: Moves an element from its original position.
Syntax:
transform="translate(x, y)"Example:
<svg width="500" height="400"> <rect x="50" y="50" width="100" height="100" fill="blue" transform="translate(100, 50)" /></svg>The rectangle is moved 100px right and 50ps down.
Output:
2. Rotation (Rotate)
Use: Rotates the element around a specified point.
Syntax:
Use: Rotates the element around a specified point.
Syntax:
transform="rotate(angle, cx, cy)"Example:
<svg width="500" height="400"> <rect x="150" y="150" width="100" height="100" fill="lightgreen" transform="rotate(45, 200, 200)" /></svg>The rectangle is rotated 45 degrees around the center point (200, 200).
Output:
3. Scaling (Resize)
Use: Resizes an element in x and y directions.
Syntax:
Use: Resizes an element in x and y directions.
Syntax:
transform="scale(sx, sy)"Example:
<svg width="500" height="400"> <rect x="50" y="50" width="100" height="100" fill="red" transform="scale(1.5, 0.5)" /></svg>The rectangle becomes 1.5x wider and half as tall.
Output:
4. Skewing (Slant)
Use: Skews an element along the X or Y axis.
Use: Skews an element along the X or Y axis.
Syntax:
transform="skewX(angle)" transform="skewY(angle)"Example:
<svg width="500" height="400"> <rect x="50" y="50" width="100" height="100" fill="purple" transform="skewX(30)" /></svg>The rectangle is slanted horizontally by 30 degrees.
Output:
5. Animating Transformations
SVG also supports animation of transformations, allowing shapes to move, rotate, or scale over time.
Example:
SVG also supports animation of transformations, allowing shapes to move, rotate, or scale over time.
Example:
<svg width="500" height="400"> <rect x="150" y="150" width="100" height="100" fill="lightgreen"> <animateTransform attributeName="transform" type="rotate" from="0 200 200" to="360 200 200" dur="5s" repeatCount="indefinite" /> </rect></svg>The rectangle rotates 360 degrees continuously around the point (200, 200) every 5 seconds.
Output:
A light green square smoothly rotates 360° around its center every 5 seconds, repeating the animation endlessly.