1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
---
title: Basistransformaties
slug: Web/SVG/Tutorial/Basic_Transformations
tags:
- Gevorderd
- SVG
- SVG Handleiding
- animatie
- transformatie
translation_of: Web/SVG/Tutorial/Basic_Transformations
original_slug: Web/SVG/Tutorial/Basis_Transformaties
---
<div>{{PreviousNext("Web/SVG/Handleidingen/Teksten", "Web/SVG/Handleiding/Knippen_en_maskeren")}}</div>
<p>Nu kunnen we beginnen om onze mooie afbeeldingen te bewerken. Maar eerst, willen we het groepelement {{SVGElement("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:</p>
<div id="two_blocks">
<pre class="brush: html"><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>
</pre>
</div>
<p>{{ EmbedLiveSample('twee_blokken', '30', '10', '', 'Web/SVG/handleidingl/Basis_Transformaties') }}</p>
<p>Transformaties voeg je eenvoudig aan het element toe met het <code>transform</code> attribuut. Elk attribuut dat je wilt veranderen, benoem je apart en je bepaalt de onderlinge samenhang door middel van timing.</p>
<h2 id="Verplaatsing">Verplaatsing</h2>
<p>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 <code>translate()</code> functie.</p>
<pre class="brush: html"><svg width="40" height="50" style="background-color:#bff;">
<rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
</svg>
</pre>
<p>In dit voorbeeld wordt een rechthoek 30 eenheden horizontaal en 40 eenheden verticaal verplaatst vanaf de oorspronkelijke plek x=0 en y=0. .</p>
<p>{{ EmbedLiveSample('Verplaatsing', '40', '50', '', 'Web/SVG/Handleidingl/Basis_Transformaties') }}</p>
<p>Als je maar één transformatiewaarde invoert, wordt de tweede geacht 0 te zijn.</p>
<h2 id="Rotatie">Rotatie</h2>
<p>Het roteren van een element wordt vaak toegepast. Hiervoor gebruik je de <code>rotate()</code> transformatie:</p>
<pre class="brush: html"><svg width="31" height="31">
<rect x="12" y="-10" width="20" height="20" transform="rotate(45)" />
</svg>
</pre>
<p>In dit voorbeeld wordt een vierkant geroteerd. Tussen de haakjes <code>rotate()</code> geef je aan hoe veel graden je wilt roteren. Je kunt ook negatieve waarden invoeren.</p>
<p>{{ EmbedLiveSample('Rotatie', '31', '31', '', 'Web/SVG/Handleidingl/Basis_Transformaties') }}</p>
<h2 id="Perspectief">Perspectief</h2>
<p>Om een rechthoek in een ruit te transformeren gebruik je de <code>skewX()</code> en <code>skewY()</code> 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.</p>
<h2 id="Schalen">Schalen</h2>
<p><code>scale()</code> verandert de grootte van een element. Je voert hier twee getallen in. De eerste bepaalt hoe de <em>x </em>factor schaalt en de tweede voor de <em>y</em> factor. The getallen worden vermenigvuldigd met het origineel. Bijvoorbeeld: <var>0.5 verkleint de x of y tot 50%. Als je maar één waarde invoert, worden zowel x als y met die waarde geschaald.</var></p>
<h2 id="Complexe_transformaties_met_matrix()">Complexe transformaties met <code>matrix()</code></h2>
<p>Alle voorgaande transformaties kunnen worden uitgedrukt in een 2x3 transformatie matrix. Als je verschillende transformaties tegelijk wilt uitvoeren kun je ook de<code>matrix(a, b, c, d, e, f)</code> transformatie gebruiken. Dit zet de oorspronkelijke coördinaten om in een geheel nieuwe set coördinaten met behulp van:</p>
<p><math display="block"><semantics><mrow><mo>{</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>new</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>=</mo><mi>a</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>c</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>e</mi></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>new</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>=</mo><mi>b</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>f</mi></mtd></mtr></mtable></mrow><annotation encoding="TeX">\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. </annotation></semantics></math></p>
<p>Zie een <a href="/en-US/docs/Web/SVG/Attribute/transform#General_Transformation">concreet voorbeeld van de SVG transformatie documentatie</a>. Gedetailleerde informatie over de transformatiematrix vind je in <a href="http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined">SVG Aanbevelingen</a>.</p>
<h2 id="Effect_voor_het_coördinaten_systeem">Effect voor het coördinaten systeem</h2>
<p>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 .</p>
<pre class="brush: html"><svg width="100" height="100">
<g transform="scale(2)">
<rect width="50" height="50" />
</g>
</svg>
</pre>
<p>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 <code>userSpaceOnUse</code>.</p>
<p>{{ EmbedLiveSample('Effecten_voor_Coordinaten_Systeem', '100', '100', '', 'Web/SVG/Handleiding/Basis_Transformaties') }}</p>
<h2 id="SVG_inbedden_in_SVG">SVG inbedden in SVG</h2>
<p>Anders dan in HTML kun je in SVG <code>svg</code> elements zoomloos inbedden in andere SVG elementen. Ook kun je gemakkelijk een geheel eigen coördinatensysteem toepassen (op ingebedde) elementen door een <code>viewBox</code>, <code>width</code> and <code>height</code> te benoemen. </p>
<pre class="brush: html"><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>
</pre>
<p>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</p>
<p>{{ EmbedLiveSample('Enbedding_SVG_in_SVG', '100', '100', '', 'Web/SVG/l/Basis_Transformaties') }}</p>
<div>{{ PreviousNext("Web/SVG/Handleiding/Teksten", "Web/SVG/Handleiding/knippen_en_maskeren")}}</div>
|
