From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../web/svg/attribute/font-size-adjust/index.html | 54 +++ files/nl/web/svg/attribute/index.html | 481 +++++++++++++++++++++ files/nl/web/svg/index.html | 94 ++++ .../svg/tutorial/basis_transformaties/index.html | 104 +++++ files/nl/web/svg/tutorial/index.html | 59 +++ 5 files changed, 792 insertions(+) create mode 100644 files/nl/web/svg/attribute/font-size-adjust/index.html create mode 100644 files/nl/web/svg/attribute/index.html create mode 100644 files/nl/web/svg/index.html create mode 100644 files/nl/web/svg/tutorial/basis_transformaties/index.html create mode 100644 files/nl/web/svg/tutorial/index.html (limited to 'files/nl/web/svg') diff --git a/files/nl/web/svg/attribute/font-size-adjust/index.html b/files/nl/web/svg/attribute/font-size-adjust/index.html new file mode 100644 index 0000000000..6e78784148 --- /dev/null +++ b/files/nl/web/svg/attribute/font-size-adjust/index.html @@ -0,0 +1,54 @@ +--- +title: font-size-adjust +slug: Web/SVG/Attribute/font-size-adjust +tags: + - HeeftCompatTabelNodig + - HeeftVoorbeeldNodig + - SVG + - SVG attribuut +translation_of: Web/SVG/Attribute/font-size-adjust +--- +

« SVG Attribuut referentie home

+ +

Het font-size-adjust attribuut stelt auteurs in staat om een ​​aspectwaarde te specificeren voor een element dat de x-hoogte van het eerste keuze font in een vervangende font behoudt.

+ +

Als een presentatie attribuut, kan het ook gebruikt worden  als een property direct in een CSS stylesheet, Zie {{ cssxref("font-size-adjust","CSS font-size-adjust") }} voor verdere informatie.

+ +

Gebruik context

+ + + + + + + + + + + + + + + + + + + + +
CategorieënPresentatie attribuut
Waarde<number> | none | inherit
AnimeerbaarJa
Normatief documentSVG 1.1 (2de Editie)
+ +

Voorbeeld

+ +

Elementen

+ +

De volgende elementen kunnen het font-size-adjust attribuut gebruiken

+ + + +

Zie ook

+ + diff --git a/files/nl/web/svg/attribute/index.html b/files/nl/web/svg/attribute/index.html new file mode 100644 index 0000000000..5c7a5df19f --- /dev/null +++ b/files/nl/web/svg/attribute/index.html @@ -0,0 +1,481 @@ +--- +title: SVG Attribute reference +slug: Web/SVG/Attribute +tags: + - Drawing + - Landing + - NeedsHelp + - NeedsTranslation + - Responsive Design + - SVG + - SVG Attribute + - SVG Reference + - TopicStub + - Vector Graphics +translation_of: Web/SVG/Attribute +--- +

« SVG / SVG Element reference »

+ +

SVG elements can be modified using attributes that specify details about exactly how the element should be handled or rendered. Below is a list of all of the attributes available in SVG along with links to reference documentation to help you learn which elements support them and how they work.

+ +

SVG attributes A to Z

+ +
+

A

+ + + +

B

+ + + +

C

+ + + +

D

+ + + +

E

+ + + +

F

+ + + +

G

+ + + +

H

+ + + +

I

+ + + +

K

+ + + +

L

+ + + +

M

+ + + +

N

+ + + +

O

+ + + +

P

+ + + +

R

+ + + +

S

+ + + +

T

+ + + +

U

+ + + +

V

+ + + +

W

+ + + +

X

+ + + +

Y

+ + + +

Z

+ + +
+ +

SVG attributes by category

+ +

Animation event attributes

+ +

{{ SVGAttr("onbegin") }}, {{ SVGAttr("onend") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onrepeat") }}

+ +

Animation attribute target attributes

+ +

{{ SVGAttr("attributeType") }}, {{ SVGAttr("attributeName") }}

+ +

Animation timing attributes

+ +

{{ SVGAttr("begin") }}, {{ SVGAttr("dur") }}, {{ SVGAttr("end") }}, {{ SVGAttr("min") }}, {{ SVGAttr("max") }}, {{ SVGAttr("restart") }}, {{ SVGAttr("repeatCount") }}, {{ SVGAttr("repeatDur") }}, {{ SVGAttr("fill") }}

+ +

Animation value attributes

+ +

{{ SVGAttr("calcMode") }}, {{ SVGAttr("values") }}, {{ SVGAttr("keyTimes") }}, {{ SVGAttr("keySplines") }}, {{ SVGAttr("from") }}, {{ SVGAttr("to") }}, {{ SVGAttr("by") }}, {{ SVGAttr("autoReverse") }}, {{ SVGAttr("accelerate") }}, {{ SVGAttr("decelerate") }}

+ +

Animation addition attributes

+ +

{{ SVGAttr("additive") }}, {{ SVGAttr("accumulate") }}

+ +

Conditional processing attributes

+ +

{{ SVGAttr("requiredExtensions") }}, {{ SVGAttr("requiredFeatures") }}, {{ SVGAttr("systemLanguage") }}.

+ +

Core attributes

+ +

{{ SVGAttr("id") }}, {{ SVGAttr("xml:base") }}, {{ SVGAttr("xml:lang") }}, {{ SVGAttr("xml:space") }}, {{ SVGAttr("tabindex") }}

+ +

Document event attributes

+ +

{{ SVGAttr("onabort") }}, {{ SVGAttr("onerror") }}, {{ SVGAttr("onresize") }}, {{ SVGAttr("onscroll") }}, {{ SVGAttr("onunload") }}

+ +

Filter primitive attributes

+ +

{{ SVGAttr("height") }}, {{ SVGAttr("result") }}, {{ SVGAttr("width") }}, {{ SVGAttr("x") }}, {{ SVGAttr("y") }}

+ +

Graphical event attributes

+ +

{{ SVGAttr("onactivate") }}, {{ SVGAttr("onclick") }}, {{ SVGAttr("onfocusin") }}, {{ SVGAttr("onfocusout") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onmousedown") }}, {{ SVGAttr("onmousemove") }}, {{ SVGAttr("onmouseout") }}, {{ SVGAttr("onmouseover") }}, {{ SVGAttr("onmouseup") }}

+ +

Presentation attributes

+ +
Note that all SVG presentation attributes can be used as CSS properties.
+ +

{{ SVGAttr("alignment-baseline") }}, {{ SVGAttr("baseline-shift") }}, {{ SVGAttr("clip") }}, {{ SVGAttr("clip-path") }}, {{ SVGAttr("clip-rule") }}, {{ SVGAttr("color") }}, {{ SVGAttr("color-interpolation") }}, {{ SVGAttr("color-interpolation-filters") }}, {{ SVGAttr("color-profile") }}, {{ SVGAttr("color-rendering") }}, {{ SVGAttr("cursor") }}, {{ SVGAttr("direction") }}, {{ SVGAttr("display") }}, {{ SVGAttr("dominant-baseline") }}, {{ SVGAttr("enable-background") }}, {{ SVGAttr("fill") }}, {{ SVGAttr("fill-opacity") }}, {{ SVGAttr("fill-rule") }}, {{ SVGAttr("filter") }}, {{ SVGAttr("flood-color") }}, {{ SVGAttr("flood-opacity") }}, {{ SVGAttr("font-family") }}, {{ SVGAttr("font-size") }}, {{ SVGAttr("font-size-adjust") }}, {{ SVGAttr("font-stretch") }}, {{ SVGAttr("font-style") }}, {{ SVGAttr("font-variant") }}, {{ SVGAttr("font-weight") }}, {{ SVGAttr("glyph-orientation-horizontal") }}, {{ SVGAttr("glyph-orientation-vertical") }}, {{ SVGAttr("image-rendering") }}, {{ SVGAttr("kerning") }}, {{ SVGAttr("letter-spacing") }}, {{ SVGAttr("lighting-color") }}, {{ SVGAttr("marker-end") }}, {{ SVGAttr("marker-mid") }}, {{ SVGAttr("marker-start") }}, {{ SVGAttr("mask") }}, {{ SVGAttr("opacity") }}, {{ SVGAttr("overflow") }}, {{ SVGAttr("pointer-events") }}, {{ SVGAttr("shape-rendering") }}, {{ SVGAttr("stop-color") }}, {{ SVGAttr("stop-opacity") }}, {{ SVGAttr("stroke") }}, {{ SVGAttr("stroke-dasharray") }}, {{ SVGAttr("stroke-dashoffset") }}, {{ SVGAttr("stroke-linecap") }}, {{ SVGAttr("stroke-linejoin") }}, {{ SVGAttr("stroke-miterlimit") }}, {{ SVGAttr("stroke-opacity") }}, {{ SVGAttr("stroke-width") }}, {{ SVGAttr("text-anchor") }}, {{ SVGAttr("text-decoration") }}, {{ SVGAttr("text-rendering") }}, {{ SVGAttr("unicode-bidi") }}, {{ SVGAttr("visibility") }}, {{ SVGAttr("word-spacing") }}, {{ SVGAttr("writing-mode") }}

+ +

Style attributes

+ +

{{ SVGAttr("class") }}, {{ SVGAttr("style") }}

+ +

Transfer function attributes

+ +

{{ SVGAttr("type") }}, {{ SVGAttr("tableValues") }}, {{ SVGAttr("slope") }}, {{ SVGAttr("intercept") }}, {{ SVGAttr("amplitude") }}, {{ SVGAttr("exponent") }}, {{ SVGAttr("offset") }}

+ + + +

{{ SVGAttr("xlink:href") }}, {{ SVGAttr("xlink:type") }}, {{ SVGAttr("xlink:role") }}, {{ SVGAttr("xlink:arcrole") }}, {{ SVGAttr("xlink:title") }}, {{ SVGAttr("xlink:show") }}, {{ SVGAttr("xlink:actuate") }}

+ +

See also

+ + diff --git a/files/nl/web/svg/index.html b/files/nl/web/svg/index.html new file mode 100644 index 0000000000..fcdb4471c5 --- /dev/null +++ b/files/nl/web/svg/index.html @@ -0,0 +1,94 @@ +--- +title: SVG +slug: Web/SVG +tags: + - 2D Graphics + - Graphics + - NeedsTranslation + - Reference + - SVG + - TopicStub + - Web + - 'l10n:priority' +translation_of: Web/SVG +--- +
Getting Started
+This tutorial will help get you started using SVG.
+ +

Scalable Vector Graphics (SVG) is an XML-based markup language for describing two dimensional based  vector graphics. SVG is essentially to graphics what HTML is to text.

+ +

SVG is a text-based open Web standard. It is explicitly designed to work with other web standards such as CSS, DOM, and SMIL.

+ +

SVG was developed by the World Wide Web consortium(W3C) since 1999.

+ +
+
+

Documentation

+ +
+
SVG element reference
+
Details about each SVG element.
+
SVG attribute reference
+
Details about each SVG attribute.
+
SVG DOM interface reference
+
Details about the SVG DOM API, for interaction with JavaScript.
+
Applying SVG effects to HTML content
+
SVG works together with {{Glossary("HTML")}}, {{Glossary("CSS")}} and {{Glossary("JavaScript")}}. Use SVG to enhance a regular HTML page or web application.
+
+ +

View All...

+ +

Community

+ +
    +
  • View Mozilla forums... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}
    • +
+ +

Tools

+ + +
+ +
+ + + + +

Animation and interactions

+ +

Like HTML, SVG has a document model (DOM) and events, and is accessible from JavaScript. This allows developers to create rich animations and interactive images.

+ + + +

Mapping, charting, games & 3D experiments

+ +

While a little SVG can go a long way to enhanced web content, here are some examples of heavy SVG usage.

+ + +
+
diff --git a/files/nl/web/svg/tutorial/basis_transformaties/index.html b/files/nl/web/svg/tutorial/basis_transformaties/index.html new file mode 100644 index 0000000000..1d19dd9ffa --- /dev/null +++ b/files/nl/web/svg/tutorial/basis_transformaties/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/index.html b/files/nl/web/svg/tutorial/index.html new file mode 100644 index 0000000000..bc313966be --- /dev/null +++ b/files/nl/web/svg/tutorial/index.html @@ -0,0 +1,59 @@ +--- +title: SVG Tutorial +slug: Web/SVG/Tutorial +tags: + - Intermediate + - NeedsContent + - NeedsHelp + - NeedsTranslation + - NeedsUpdate + - SVG + - 'SVG:Tutorial' + - TopicStub +translation_of: Web/SVG/Tutorial +--- +

Scalable Vector Graphics, SVG, is a W3C XML dialect to mark up graphics. It is partially implemented in Firefox, Opera, WebKit browsers, Internet Explorer and other browsers.

+ +

This tutorial aims to explain the internals of SVG and is packed with technical details. If you just want to draw beautiful images, you might find more useful resources at Inkscape's documentation page. Another good introduction to SVG is provided by the W3C's SVG Primer.

+ +
The tutorial is in an early stage of development. If you're able, please help out by chipping in and writing a paragraph or two. Extra points for writing a whole page!
+ +
Introducing SVG from Scratch
+ + + +

The following topics are more advanced and hence should get their own tutorials.

+ +
Scripting SVG with JavaScript
+ +

TBD

+ +
SVG filters tutorial
+ +

TBD

+ +
Animations with SMIL in SVG
+ +

TBD

+ +
Creating fonts in SVG
+ +

TBD

-- cgit v1.2.3-54-g00ecf