Transformation in SVG
- Translation: Move the object from one center point to another
Example:
<svg width="500" height="400">
<rect x="50" y="50" width="100" height="100" fill="blue" transform="translate(100, 50)" />
</svg>
Output:
- Rotation: Rotate the object by a certain angle
Example:
<svg width="500" height="400">
<rect x="150" y="150" width="100" height="100" fill="lightgreen" transform="rotate(45, 200, 200)" />
</svg>
Output:
- Scaling: Resize object
Example:
<svg width="500" height="400">
<rect x="50" y="50" width="100" height="100" fill="red" transform="scale(1.5, 0.5)" />
</svg>
Output:
- Skewing: Slants object along x and y axis
Example:
<svg width="500" height="400">
<rect x="50" y="50" width="100" height="100" fill="purple" transform="skewX(30)" />
</svg>
Output:
- Animating Transformations: SVG supports animating transformations
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>