Naar inhoud springen

Scalable Vector Graphics/Figuren opmaken

Uit Wikibooks

SVG

Inleiding
  1. Basisfiguren
  2. Eigen vormen
  3. Figuren opmaken
  4. Tekst

Kleuren

[bewerken]

Figuren kunnen we kleuren aan de hand van fill en stroke. Kleuren opgeven kun je op verschillende manieren: aan de hand van hun HTML-naam, RGB-waarde of hex-code. Wanneer we willen dat er geen kleur is kunnen we dit aan de hand van de waarde 'none'; het resultaat is een transparant element.

naam betekenis type standaardwaarde opmerkingen
fill opvulkleur kleur "black"

Rand

[bewerken]

Voor de rand kunnen we een dikte en een kleur opgeven, d.m.v. resp. 'stroke' en 'stroke-width'.

naam betekenis type standaardwaarde opmerkingen
stroke randkleur kleur geen verplicht (indien een rand gewenst is)
stroke-width lijndikte lijndikte-waarde 1
  • N.B.: Wanneer geen waarde voor 'stroke' wordt opgegeven zal geen rand getekend worden.

Ondoorzichtigheid

[bewerken]
naam betekenis type standaardwaarde opmerkingen
opacity ondoorzichtigheid ondoorzichtigheids­waarde 1

De opacity kan elke waarde van 0 (nul) t/m 1 krijgen: 0 is transparant, 1 is geheel ondoorzichtig.

Voorbeeld

[bewerken]

Nu heb je al wat kennis om een eenvoudige tekening te kunnen maken. Een voorbeeld met enkele basiselementen:[1]

<rect width="400" height="200" fill="skyblue" />                                            <!-- lucht-->
<rect width="400" height="100" y="200" fill="green" />                                      <!-- gras -->
<circle cx="60" cy="35" r="20" fill="yellow" />                                             <!-- zon -->
<polygon points="150,220 150,120 250,40 350,120 350,220" fill="red" />                      <!-- huis -->
<rect width="52" height="52" x="173" y="142" fill="lightgrey" />                            <!-- raam (glas) -->
<rect width="52" height="52" x="173" y="142" fill="none" stroke="brown" stroke-width="5" /> <!-- raam (kozijn) -->
<rect width="55" height="80" x="270" y="140" fill="brown" />                                <!-- deur -->
<ellipse cx="278" cy="180" rx="2" ry="3" />                                                 <!-- deurknop -->

Het resultaat is als volgt:

  1. Zie hier voor noodzakelijke inleidende code.
Informatie afkomstig van https://nl.wikibooks.org Wikibooks NL.
Wikibooks NL is onderdeel van de wikimediafoundation.