SVG Gradiënte - Lineêr
SVG-gradiënte
'n Gradiënt is 'n gladde oorgang van een kleur na 'n ander. Daarbenewens kan verskeie kleuroorgange op dieselfde element toegepas word.
Daar is twee hooftipes gradiënte in SVG:
- Lineêr
- Radiaal
SVG Lineêre Gradiënt - <linearGradient>
Die <linearGradient> element word gebruik om 'n lineêre gradiënt te definieer.
Die <linearGradient>-element moet binne 'n <defs>-merker geneste wees. Die <defs>-merker is kort vir definisies en bevat definisie van spesiale elemente (soos gradiënte).
Lineêre gradiënte kan gedefinieer word as horisontale, vertikale of hoekige gradiënte:
- Horisontale gradiënte word geskep wanneer y1 en y2 gelyk is en x1 en x2 verskil
- Vertikale gradiënte word geskep wanneer x1 en x2 gelyk is en y1 en y2 verskil
- Hoekgradiënte word geskep wanneer x1 en x2 verskil en y1 en y2 verskil
Voorbeeld 1
Definieer 'n ellips met 'n horisontale lineêre gradiënt van geel na rooi:
Hier is die SVG-kode:
Voorbeeld
<svg height="150" width="400">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55"
fill="url(#grad1)" />
</svg>
Kode verduideliking:
- Die id-kenmerk van die <linearGradient>-merker definieer 'n unieke naam vir die gradiënt
- Die x1, x2, y1,y2 eienskappe van die <linearGradient> merker definieer die begin- en eindposisie van die gradiënt
- Die kleurreeks vir 'n gradiënt kan uit twee of meer kleure saamgestel word. Elke kleur word gespesifiseer met 'n <stop> tag. Die offset-kenmerk word gebruik om te definieer waar die gradiëntkleur begin en eindig
- Die vul-kenmerk koppel die ellipselement aan die gradiënt
Voorbeeld 2
Definieer 'n ellips met 'n vertikale lineêre gradiënt van geel na rooi:
Hier is die SVG-kode:
Voorbeeld
<svg height="150" width="400">
<defs>
<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>
Voorbeeld 3
Definieer 'n ellips met 'n horisontale lineêre gradiënt van geel na rooi, en voeg 'n teks binne die ellips by:
Hier is die SVG-kode:
Voorbeeld
<svg height="150" width="400">
<defs>
<linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55"
fill="url(#grad3)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
SVG</text>
</svg>
Kode verduideliking:
- Die <text> element word gebruik om 'n teks by te voeg