Opvullingen

  1. De <pattern><pattern>-tag
  2. De <lineargradient></lineargradient>-tag
  3. De <radialgradient></radialgradient>-tag

De tag <pattern><pattern>

Als u een object wilt opvullen met een patroon definieert u een patroon bij de definities (tussen <defs> en </defs>). Deze tag heeft de volgende attributen:
Attribuut Verplicht waarde van het attribuut uitleg
patternUnits nee userSpaceOnUse / objectBoundingBox Duidt het coördinaatsysteem aan.
x ja coördinaat x-coördinaat van de opvulling.
y ja coördinaat y-coördinaat van de opvulling.
width ja lengte Breedte van de tekening die als patroon wordt gebruikt (of breder, dan is er meer plaats tussen de tekeningen in het patroon).
height ja lengte Hoogte van de tekening die als patroon wordt gebruikt (of hoger, dan is er meer plaats tussen de tekeningen in het patroon).

Mogelijke subtags:
desc | title | metadata | defs | path | text | rect | circle | ellipse | line | polyline | polygon | use | image | svg | g | view | switch | a | altGlyphDef | script | style | symbol | marker | clipPath | mask | linearGradient | radialGradient | pattern | filter | cursor | font | animate | set | animateMotion | animateColor | animateTransform | color-profile | font-face


Tussen <pattern> en </pattern> plaatst u de tekening die als patroon moet worden gebruikt. Bijvoorbeeld: <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100px" height="100px">
<defs>
<pattern id="strepen" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="3">
<rect width="50" height="2" fill="black" />
</pattern>
</defs>
<circle cx="50" cy="50" r="46" fill="url(#strepen)" />
</svg>

(Bekijk dit voorbeeld).

De tag <linearGradient></linearGradient>

Voor kleurovergangen gebruikt u de tag <linearGradient></linearGradient>
Attribuut Verplicht waarde van het attribuut uitleg
x1 nee coördinaat x-coördinaat van het beginput van de lijn die de richting van de kleurovergang aangeeft.
y1 nee coördinaat y-coördinaat van het beginpunt van de lijn die de richting van de kleurovergang aangeeft.
x2 nee coördinaat x-coördinaat van het eindpunt van de lijn die de richting van de kleurovergang aangeeft.
y2 nee coördinaat y-coördinaat van het eindpunt van de lijn die de richting van de kleurovergang aangeeft.

Mogelijke subtags:
stop | animate | set | animateTransform


Tussen deze tag plaatst u, voor de kleuren van de kleurovergang aan te duiden, de <stop />-tag. Deze tag heeft de volgende attributen:
Attribuut Verplicht waarde van het attribuut uitleg
offset ja lengte Positie waarop de kleur bereikt wordt.
stop-color ja kleur Een kleur van de kleurovergang.
stop-opacity nee getal tussen 0 en 1 zichtbaarheid van het einde van de overgang

Mogelijke subtags:
animate | set | animateColor

Bijvoorbeeld:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="200px" height="200px">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="10%" stop-color="yellow" />
<stop offset="80%" stop-color="#ff7800" />
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#grad1)" />
</svg>

(Bekijk dit voorbeeld).

De tag <radialGradient></radialGradient>

Als u een kleurovergang met cirkels wilt hebben gebruikt u de tag <radialGradient></radialGradient>. Deze tag heeft de volgende attributen:
Attribuut Verplicht waarde van het attribuut uitleg
cx nee coördinaat x-coördinaat van de cirkel van de kleurovergang.
cy nee coördinaat y-coördinaat van de cirkel van de kleurovergang.
r nee lengte Straal van de cirkel die de kleurovergang aangeeft.

Mogelijke subtags:
stop | animate | set | animateTransform

Tussen deze tag plaatst u, voor de kleuren van de kleurovergang aan te duiden, de <stop />-tag. Deze tag heeft de volgende attributen:
Attribuut Verplicht waarde van het attribuut uitleg
offset ja lengte Positie waarop de kleur bereikt wordt.
stop-color ja kleur Een kleur van de kleurovergang.
stop-opacity nee getal tussen 0 en 1 zichtbaarheid van het einde van de overgang

Mogelijke subtags:
animate | set | animateColor

Bijvoorbeeld:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="200px" height="200px">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="60%">
<stop offset="10%" stop-color="yellow" />
<stop offset="80%" stop-color="#ff7800" />
</radialGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#grad1)" />
</svg>
(Bekijk dit voorbeeld).


Ga naar het volgende hoofdstuk: filters. Valid XHTML 1.0!