SVG
transformatie

Syntaxis

• transform = " [functies] * "
• translate (x [, y])
• rotate (θ [x, y])
• weegschaal (x [, y])
• skewX (θ)
• skewY (θ)
• matrix (a, b, c, d, e, f)

Transformaties toepassen

Transformaties kunnen op elementen worden toegepast door een transform toe te voegen:

<circle cx="0" cy="0" r="50" transform="translate(50,50)"/>

Of naar groepen elementen tussen <g> -tags:

<g transform="translate(50,50)">
<circle cx="0" cy="0" r="50"/>
<circle cx="0" cy="0" r="25" fill="white"/>
</g>

Meer transformaties kunnen op hetzelfde element worden toegepast door ze toe te voegen gescheiden door spaties:

<circle cx="0" cy="0" r="50" transform="translate(50,50) scale(.5)"/>

Transformatie functies

Vertalen

verplaatsingsafbeeldingen translate langs gespecificeerde vectoren:

<circle cx="0" cy="0" r="50" transform="translate(50,50)"/>

De eerste waarde is de x-vertaling en de tweede de y. Als de y wordt weggelaten, wordt deze standaard ingesteld op 0.

Schaal

scale verkleint elementen met gespecificeerde verhoudingen:

<circle cx="50" cy="50" r="25" transform="scale(.5,2)"/>

Net als bij translate zijn de argumenten x en vervolgens y. Als in scale de y wordt weggelaten, wordt deze standaard ingesteld op de waarde x; met andere woorden, het schaalt het element zonder de beeldverhouding te wijzigen.

Draaien

rotate roteert elementen met opgegeven hoeken.

<!-- <rect> used for this example because circles can't be rotated -->
<rect width="100" height="5" transform="rotate(90,50,50)"/>

De eerste waarde is de hoek, in graden. De transformatie wordt met de klok mee toegepast. De andere twee waarden vertegenwoordigen het punt dat moet worden geroteerd, standaard ingesteld op de oorsprong.