Scalable Vector Graphics/Figuren opmaken: verschil tussen versies
| Regel 40: | Regel 40: | ||
|} |
|} |
||
==Ondoorzichtigheid== |
|||
==Doorschijnbaarheid== |
|||
{| class="prettytable" |
{| class="prettytable" |
||
|- |
|- |
||
| Regel 47: | Regel 47: | ||
! type |
! type |
||
! standaardwaarde |
! standaardwaarde |
||
! opmerkingen |
|||
! opmerking |
|||
|- |
|- |
||
| opacity |
| opacity |
||
| ondoorzichtigheid |
|||
| doorschijnbaarheid |
|||
| ondoorzichtigheid-waarde <!-- betere vertaling aub. ? --> |
|||
| doorschijnbaarheid-waarde |
|||
| 1 |
| 1 |
||
| |
| |
||
|} |
|} |
||
De opacity kan elke waarde van 0 (nul) t/m 1 krijgen: 0 is transparant, 1 is geheel ondoorzichtig. |
|||
==Voorbeeld== |
==Voorbeeld== |
||
Versie van 27 okt 2008 02:48
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
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<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" />
</svg>
Afbeelding
