From 004b3c5fc8d71b68fcb019c9e0346bf80024dbbd Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:48:47 +0100 Subject: unslug nl: move --- .../svg/tutorial/basic_transformations/index.html | 104 +++++++++++++++++++++ .../svg/tutorial/basis_transformaties/index.html | 104 --------------------- 2 files changed, 104 insertions(+), 104 deletions(-) create mode 100644 files/nl/web/svg/tutorial/basic_transformations/index.html delete mode 100644 files/nl/web/svg/tutorial/basis_transformaties/index.html (limited to 'files/nl/web/svg/tutorial') diff --git a/files/nl/web/svg/tutorial/basic_transformations/index.html b/files/nl/web/svg/tutorial/basic_transformations/index.html new file mode 100644 index 0000000000..1d19dd9ffa --- /dev/null +++ b/files/nl/web/svg/tutorial/basic_transformations/index.html @@ -0,0 +1,104 @@ +--- +title: Basistransformaties +slug: Web/SVG/Tutorial/Basis_Transformaties +tags: + - Gevorderd + - SVG + - SVG Handleiding + - animatie + - transformatie +translation_of: Web/SVG/Tutorial/Basic_Transformations +--- +
{{PreviousNext("Web/SVG/Handleidingen/Teksten", "Web/SVG/Handleiding/Knippen_en_maskeren")}}
+ +

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:

+ +
+
<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>
+
+
+ +

{{ EmbedLiveSample('twee_blokken', '30', '10', '', 'Web/SVG/handleidingl/Basis_Transformaties') }}

+ +

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. .

+ +

{{ EmbedLiveSample('Verplaatsing', '40', '50', '', 'Web/SVG/Handleidingl/Basis_Transformaties') }}

+ +

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.

+ +

{{ EmbedLiveSample('Rotatie', '31', '31', '', 'Web/SVG/Handleidingl/Basis_Transformaties') }}

+ +

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 x 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.

+ +

{{ EmbedLiveSample('Effecten_voor_Coordinaten_Systeem', '100', '100', '', 'Web/SVG/Handleiding/Basis_Transformaties') }}

+ +

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

+ +

{{ EmbedLiveSample('Enbedding_SVG_in_SVG', '100', '100', '', 'Web/SVG/l/Basis_Transformaties') }}

+ +
{{ PreviousNext("Web/SVG/Handleiding/Teksten", "Web/SVG/Handleiding/knippen_en_maskeren")}}
diff --git a/files/nl/web/svg/tutorial/basis_transformaties/index.html b/files/nl/web/svg/tutorial/basis_transformaties/index.html deleted file mode 100644 index 1d19dd9ffa..0000000000 --- a/files/nl/web/svg/tutorial/basis_transformaties/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Basistransformaties -slug: Web/SVG/Tutorial/Basis_Transformaties -tags: - - Gevorderd - - SVG - - SVG Handleiding - - animatie - - transformatie -translation_of: Web/SVG/Tutorial/Basic_Transformations ---- -
{{PreviousNext("Web/SVG/Handleidingen/Teksten", "Web/SVG/Handleiding/Knippen_en_maskeren")}}
- -

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:

- -
-
<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>
-
-
- -

{{ EmbedLiveSample('twee_blokken', '30', '10', '', 'Web/SVG/handleidingl/Basis_Transformaties') }}

- -

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. .

- -

{{ EmbedLiveSample('Verplaatsing', '40', '50', '', 'Web/SVG/Handleidingl/Basis_Transformaties') }}

- -

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.

- -

{{ EmbedLiveSample('Rotatie', '31', '31', '', 'Web/SVG/Handleidingl/Basis_Transformaties') }}

- -

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 x 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.

- -

{{ EmbedLiveSample('Effecten_voor_Coordinaten_Systeem', '100', '100', '', 'Web/SVG/Handleiding/Basis_Transformaties') }}

- -

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

- -

{{ EmbedLiveSample('Enbedding_SVG_in_SVG', '100', '100', '', 'Web/SVG/l/Basis_Transformaties') }}

- -
{{ PreviousNext("Web/SVG/Handleiding/Teksten", "Web/SVG/Handleiding/knippen_en_maskeren")}}
-- cgit v1.2.3-54-g00ecf