Scalable Vector Graphics/Figuren opmaken: verschil tussen versies
Verwijderde inhoud Toegevoegde inhoud
Geen bewerkingssamenvatting |
|||
| Regel 60: | Regel 60: | ||
==Voorbeeld== |
==Voorbeeld== |
||
Nu heb je al wat kennis om een tekening te |
Nu heb je al wat kennis om een eenvoudige tekening te kunnen maken. Een voorbeeld met enkele basiselementen: |
||
{{Voorbeeld|1= |
{{Voorbeeld|1= |
||
<rect width="400" height="200" fill="skyblue" /> |
<rect width="400" height="200" fill="skyblue" /> <!-- lucht--> |
||
<rect width="400" height="100" y="200" fill="green" /> |
<rect width="400" height="100" y="200" fill="green" /> <!-- gras --> |
||
<circle cx="60" cy="35" r="20" fill="yellow" /> |
<circle cx="60" cy="35" r="20" fill="yellow" /> <!-- zon --> |
||
<polygon points="150,220 150,120 250,40 350,120 350,220" fill="red" /> |
<polygon points="150,220 150,120 250,40 350,120 350,220" fill="red" /> <!-- huis --> |
||
<rect width=" |
<rect width="52" height="52" x="173" y="142" fill="lightgrey" /> <!-- raam (glas) --> |
||
| ⚫ | |||
<ellipse cx="275" cy="170" rx="2" ry="3" /> |
|||
<rect width=" |
<rect width="55" height="80" x="270" y="140" fill="brown" /> <!-- deur --> |
||
<ellipse cx=" |
<ellipse cx="278" cy="180" rx="2" ry="3" /> <!-- deurknop --> |
||
<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" /> |
|||
| ⚫ | |||
}} |
}} |
||
Het resultaat is als volgt: |
Het resultaat is als volgt: |
||
[[Afbeelding:Svg-opmaak.svg|left]] |
[[Afbeelding:Svg-opmaak-simpel.svg|left]] |
||
{{sub}} |
{{sub}} |
||
Versie van 18 nov 2010 02:27
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 eenvoudige tekening te kunnen maken. Een voorbeeld met enkele basiselementen:
<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:
