- De <pattern><pattern>-tag
- De <lineargradient></lineargradient>-tag
- 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).
;){kind=link}
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).
;){kind=link}
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).
;){kind=link}
| Ga naar het volgende hoofdstuk: filters. |
|