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 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	0 (zwart)

Rand

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

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. Een voorbeeld met enkele verschillende elementen:

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

Het resultaat is als volgt: