Scalable Vector Graphics/Figuren opmaken: verschil tussen versies

Uit Wikibooks
Verwijderde inhoud Toegevoegde inhoud
Geen bewerkingssamenvatting
Geen bewerkingssamenvatting
Regel 1: Regel 1:
{{SVG inhoud|Deel=Basiscursus}}
==Kleuren==
==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.
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.

Versie van 4 dec 2008 04:08

SVG

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

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
stroke randkleur kleur

Rand

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

naam betekenis type standaardwaarde opmerkingen
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. 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:

Informatie afkomstig van https://nl.wikibooks.org Wikibooks NL.
Wikibooks NL is onderdeel van de wikimediafoundation.