Scalable Vector Graphics/Transformaties

In het transform-attribuut van een figuur, tekst-element of groep kunnen opdrachten gegeven worden die een vervorming of verplaatsing tot gevolg hebben. Per element is één transform-attribuut toegestaan, dat echter meerdere opdrachten kan bevatten, die elk ook meer dan eens gebruikt mogen worden; deze worden uitgevoerd in de opgegeven volgorde.

Syntax

Het attribuut wordt direct gevolgd door een is-gelijk-teken ("="), daarna volgt/volgen de opdracht(en), tussen één stel dubbele aanhalingstekens; ze worden onderling gescheiden door een komma of spatie. Van elke opdracht staat/staan de parameter(s) tussen haakjes, ook gescheiden door een komma of spatie.

Roteren

Een figuur, tekst-element of groep kan geroteerd worden d.m.v. de rotate-opdracht in het transform-attribuut. De parameter is een hoek, uitgedrukt in graden; negatieve waarden en decimale breuken zijn toegestaan.

<rect ... transform="rotate(45)" />

Het "draaipunt" voor deze opdracht is het nulpunt van het actieve coördinatensysteem, maar dat kan aangepast worden: de opdracht rotate accepteert twee extra parameters, die de x- en y-coördinaten van het gewenste draaipunt aangeven, uitgedrukt in pixels.

<rect ... transform="rotate(45, 50, 50)" />

Het resultaat is gelijk aan dat wat bereikt wordt door eerst een translate uit te voeren om het actieve nulpunt te verplaatsen naar (50, 50), daarna de rotate-opdracht te geven, en tenslotte de "verplaatsing" weer ongedaan te maken:

<rect ... transform="translate(50, 50) rotate(45) translate(-50, -50)" />

Schalen

Figuren, tekst-elementen en groepen van figuren) kunnen vergroot en verkleind worden met de scale-opdracht. Als één waarde - uitgedrukt in pixels - opgegeven wordt zal deze worden toegepast op de x- en y-as.

<rect ... transform="scale(2)" />

De horizontale en verticale schaalwaarden kunnen ook apart van elkaar worden opgegeven in twee parameters, gescheiden door een spatie of een komma. Negatieve waarden en breuken zijn toegestaan.

<rect ... transform="scale(2, 3)" />

Merk op dat het schalen wordt uitgevoerd door het herberekenen van alle coördinaten van de afbeelding, ten opzichte van het actieve nulpunt van de tekening; de figuur zal dus ogenschijnlijk niet alleen vergroot of verkleind maar ook verplaatst worden. Om dit op te vangen kan het actieve nulpunt, d.m.v. de opdracht translate, tijdelijk verplaatst worden naar b.v. het middelpunt van de figuur.

Verplaatsen

Een figuur, tekst-element of groep kan verplaatst worden met de translate-opdracht. Deze vraagt een of twee parameters, t.w. x resp. x en y, uitgedrukt in pixels. Wanneer alleen x wordt opgegeven zal de waarde voor y op 0 (nul) gesteld worden.
De verplaatsing wordt uitgevoerd met het opgegeven aantal pixels, gerekend vanaf het actieve nulpunt van het canvas, doorgaans is dat linksboven.

<rect ... transform="translate(50, 50)" />

De opdracht translate moet soms gebruikt worden om het coördinatensysteem tijdelijk aan te passen ten behoeve van een bewerking op een object, zoals roteren, schalen of vervormen. Als dit het geval is, moet na de betreffende bewerking nogmaals een translate-opdracht gegeven worden, nu met de inverse van de waarden.
In het volgende voorbeeld moet een cirkel, waarvan het middelpunt op (50, 50) ligt, met 25% vergroot worden. De eerste translate verplaatst het actieve nulpunt tijdelijk naar het middelpunt van de cirkel, en na de scale-opdracht zorgt een translate met dezelfde - maar nu negatieve - waarden voor x en y dat de figuur niet tevens verplaatst wordt in de uiteindelijke afbeelding.

<circle ... transform="translate(50, 50) scale(1.25) translate(-50, -50)" />

Vervormen

Een figuur, tekst-element of groep kan schuin vervormd worden met een van de twee skew-opdrachten: horizontaal met skewX, verticaal met skewY. Deze opdrachten vragen een parameter die de tangens (!) van de gewenste hoek opgeeft, de vervorming wordt uitgevoerd ten opzichte van het actieve nulpunt in het actieve coördinatensysteem.
Een rechthoek bijvoorbeeld zal met skewX tot een parallelogram omgevormd worden, waarbij de staande zijden een hoek gaan vormen met de liggende zijden, maar de hoogte van de figuur gelijk blijft. Een cirkel zal vervormd worden tot een ovaal.

<rect ... transform="skewX(1)" />
<rect ... transform="skewY(1)" />

N.B.: Het "draaipunt" van de vervorming is ook hier het actieve nulpunt van de afbeelding; dit kan tijdelijk veranderd worden door voor en na de skew-functie een translate toe te passen.

Matrix

De matrix-functie voert een aantal transform's tegelijk uit, tw. schalen, vervormen en verplaatsen, voor zowel x als y. De zes parameters en hun neutrale waarden zijn:

• scale(X) (1)
• skewY (0)
• skewX (0)
• scale(Y) (1)
• translate(X) (0)
• translate(Y) (0)

NB.: Let op de (onlogische) volgorde!

<rect ... transform="matrix(scaleX, skewY, skewX, scaleY, translateX, translateY)" />