SVG Linear Gradient

SVG verlopen moeten worden gedefinieerd binnen de <defs>-tag.

SVG verloop

Een verloop is een soepele overgang van de ene kleur naar de andere. Bovendien kan een overgang van meerdere kleuren worden toegepast op hetzelfde element.

In SVG zijn er twee hoofdtypen van verlopen:

  • Lineaire verloop
  • Radiële verloop

Lineaire verloop

De <linearGradient>-tag wordt gebruikt om lineaire verlopen in SVG te definiëren.

De <linearGradient>-tag moet worden ingesloten in de <defs>-tag. De <defs>-tag is een afkorting voor definitions en kan speciale elementen zoals verlopen definiëren.

Een lineaire verloop kan worden gedefinieerd als een horizontale, verticale of hoekverloop:

  • Wanneer y1 en y2 gelijk zijn, en x1 en x2 verschillend zijn, kan een horizontale verloop worden gecreëerd
  • Wanneer x1 en x2 gelijk zijn, en y1 en y2 verschillend zijn, kan een verticale verloop worden gecreëerd
  • Wanneer x1 en x2 verschillend zijn, en y1 en y2 verschillend zijn, kan een hoekverloop worden gecreëerd

Kopieer onderstaande code naar een notepad en sla het bestand op als "linear1.svg". Plaats dit bestand in uw webdirectory:

<?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="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" 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="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

Code-explikatie:

  • De id-eigenschap van de <linearGradient>-tag kan een unieke naam definiëren voor de verloop
  • De eigenschap fill:url(#orange_red) koppelt het ellipse-element aan deze verloop
  • De x1, x2, y1, y2-eigenschappen van de <linearGradient>-tag kunnen de begin- en eindpositie van de verloop definiëren
  • De kleurreeks van de verloop kan bestaan uit twee of meer kleuren. Elke kleur wordt gedefinieerd door een <stop>-tag. De offset-eigenschap wordt gebruikt om de begin- en eindpositie van de verloop te definiëren.

Bekijk het voorbeeld (horizontale verloop)

Een ander voorbeeld:

<?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="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
<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="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

View Example (Vertical Gradient)