Scalable Vector Graphics/Figuren opmaken

Kleuren

Figuren kunnen we kleuren aan de hand van fill en stroke. Kleuren opgeven kun je op verschillende manieren: aan de hand van hun naam, rgb-functie of de hex-code. Wanneer we willen dat er geen kleur is kunnen we dit aan de hand van de waarde 'none'.

naam	betekenis	type	standaardwaarde	opmerking
fill	opvul kleur	kleur
stroke	rand kleur	kleur

Rand

Bij de rand kunnen we een dikte meegeven. Dit doen we aan de hand van de 'stroke-width'.

naam	betekenis	type	standaardwaarde	opmerking
stroke-width	lijn dikte	lijn dikte waarde

Ondoorzichtigheid

naam	betekenis	type	standaardwaarde	opmerkingen
opacity	ondoorzichtigheid	ondoorzichtigheid-waarde	1

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

Voorbeeld

Nu heb je al wat kennis om een tekening te beginnen te maken.

Code

Een voorbeeld:

<rect width="400" height="200" fill="skyblue" />
<rect width="400" height="100" y="200" fill="green" />
<circle cx="60" cy="35" r="20" fill="yellow" />
<polygon points="150,220 150,120 250,40 350,120 350,220" fill="red" />
<rect width="55" height="80" x="270" y="140" fill="brown" />
<ellipse cx="275" cy="170" rx="2" ry="3" />
<rect width="52" height="52" x="173" y="142" fill="white" />
<ellipse cx="195" cy="180" rx="14" ry="16" fill="orange" />
<circle cx="190" cy="175" r="2" />
<circle cx="200" cy="175" r="2" />
<circle cx="195" cy="182" r="2" />
<line x1="190" y1="188" x2="200" y2="188" stroke-width="2" stroke="black" />
<rect width="52" height="52" x="173" y="142" fill="blue" opacity="0.2" />
<rect width="52" height="52" x="173" y="142" fill="none" stroke="brown" stroke-width="5" />

Afbeelding