Deze vertaling is niet volledig. Help dit artikel te vertalen vanuit het Engels.

Nu kunnen we beginnen om onze mooie afbeeldingen te bewerken. Maar eerst, willen we het groepelement <g> aan je voorstellen. Met de groep<tag>, kun je eigenschappen van een hele groep elementen ineens benoemen. Dat is overigens de enige functie van de "g". Voorbeeld:

<svg width="30" height="10">
    <g fill="red">
        <rect x="0" y="0" width="10" height="10" />
        <rect x="20" y="0" width="10" height="10" />
    </g>
</svg>

Transformaties voeg je eenvoudig aan het element toe met het transform  attribuut. Elk attribuut dat je wilt veranderen, benoem je apart en je bepaalt de onderlinge samenhang door middel van timing.

Verplaatsing

Je kunt een element verplaatsen zonder de "x" en "y" positie te veranderen. Dit is handig als je de <use> gebruikt of een animatie benoemt. Hiervoor gebruik je de translate() functie.

<svg width="40" height="50" style="background-color:#bff;">
    <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
</svg>

In dit voorbeeld wordt een rechthoek 30 eenheden horizontaal en 40 eenheden verticaal verplaatst vanaf de oorspronkelijke plek x=0 en y=0. .

Als je maar één transformatiewaarde invoert, wordt de tweede geacht 0 te zijn.

Rotatie

Het roteren van een element wordt vaak toegepast. Hiervoor gebruik je de rotate() transformatie:

<svg width="31" height="31">
    <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" />
</svg>

In dit voorbeeld wordt een vierkant geroteerd. Tussen de haakjes rotate() geef je aan hoe veel graden je wilt roteren. Je kunt ook negatieve waarden invoeren.

Perspectief

Om een rechthoek in een ruit te transformeren gebruik je de skewX() en skewY() transformaties. Je moet ze apart/achtereenvolgens benoemen. Tussen de haakjes vemeld je de hoek waarin je de X of de Y as wilt vervormen ten opzichte van het origineel.

Schalen

scale() verandert de grootte van een element. Je voert hier twee getallen in. De eerste bepaalt hoe de factor schaalt en de tweede voor de y factor. The getallen worden vermenigvuldigd met het origineel. Bijvoorbeeld:  0.5 verkleint de x of y tot 50%.  Als je maar één waarde invoert, worden zowel x als y met die waarde geschaald.

Complexe transformaties met matrix()

Alle voorgaande transformaties kunnen worden uitgedrukt in een 2x3 transformatie matrix. Als je verschillende transformaties tegelijk wilt uitvoeren kun je ook dematrix(a, b, c, d, e, f) transformatie gebruiken. Dit zet de oorspronkelijke coördinaten om in een geheel nieuwe set coördinaten met behulp van:

{xnewCoordSys=axprevCoordSys+cyprevCoordSys+eynewCoordSys=bxprevCoordSys+dyprevCoordSys+f\left{ \begin{matrix} x_{\mathrm{oudeCoordinaten}} = a x_{\mathrm{nieuweCoordinaten}} + c y_{\mathrm{nieuweCoordinaten}} + e \\ y_{\mathrm{oudeCoordinaten}} = b x_{\mathrm{oudeCoordinaten}} + d y_{\mathrm{nieuweCoordinaten}} + f \end{matrix} \right.

Zie een concreet voorbeeld van de SVG transformatie documentatie. Gedetailleerde informatie over de transformatiematrix vind je in SVG Aanbevelingen.

Effect voor het coördinaten systeem

Als je transformaties gebruikt, verander je het gehele coördinatensysteem van het element dat je transformeert. Dat betekent dat de  elementen die je hebt gespecificeerd en hun kinderen niet langer door de oorspronkelijke coördinaten worden gevormd, maar dat die ook worden vergroot/verkleind, vervormd, verplaatst of geroteerd .

<svg width="100" height="100">
    <g transform="scale(2)">
        <rect width="50" height="50" />
    </g>
</svg>

De vierkant hierboven wordt 100 bij 100 pixels.  De effecten van de transformaties kunnen echter ook nog eens beïnvloed worden door het gebruik van attributen zoals userSpaceOnUse.

SVG inbedden in SVG

Anders dan in HTML kun je in SVG svg elements zoomloos inbedden in andere SVG elementen. Ook kun je gemakkelijk een geheel eigen coördinatensysteem  toepassen (op ingebedde) elementen door een viewBox, width and height te benoemen. 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100">
  <svg width="100" height="100" viewBox="0 0 50 50">
    <rect width="50" height="50" />
  </svg>
</svg> 

In het voorbeeld is de viewbox zo gedefinieerd ten opzichte van de hoogte en breedte, dat het coordinatenstelsel twee keer zo groot wordt. Het effect is gelijk die in het voorgaande voorbeeld

Documentlabels en -medewerkers

Aan deze pagina hebben bijgedragen: Tonnes, SphinxKnight, HennyBergsma
Laatst bijgewerkt door: Tonnes,