SVG Transformation

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

Remarks

Graphic elements can be altered by adding a transform attribute.

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="30" height="30" transform="translate(10, 10)" />
</svg>

Instead of the top left origin being rendered at coordinates (0, 0), it will be shown down and right, from point (10, 10).

Whole groups of elements can be transformed together, and transformations can add to one another.

<svg xmlns="http://www.w3.org/2000/svg">
    <g transform="rotate(45)">
        <rect x="0" y="0" width="30" height="30" />
        <circle cx="5" cy="5" r="5" transform="scale(3)" />
    </g>
</svg>

First, every point of the circle will be scaled with the factor 3 in relation to the origin, bringing the center of the circle to the middle of the rectangle at (15, 15) and its radius to 15. Then, the rectangle and the circle will be rotated together by 45 degrees clockwise around the origin.



Got any SVG Question?