SVG-verlopen - lineair

SVG-verlopen

Een verloop is een vloeiende overgang van de ene kleur naar de andere. Daarnaast kunnen meerdere kleurovergangen op hetzelfde element worden toegepast.

Er zijn twee hoofdtypen verlopen in SVG:

• Lineair
• radiaal

SVG lineair verloop - <linearGradient>

Het element <linearGradient> wordt gebruikt om een ​​lineair verloop te definiëren.

Het <linearGradient>-element moet worden genest in een <defs>-tag. De tag <defs> is een afkorting voor definities en bevat definitie van speciale elementen (zoals gradiënten).

Lineaire gradiënten kunnen worden gedefinieerd als horizontale, verticale of hoekige gradiënten:

• Horizontale gradiënten worden gemaakt wanneer y1 en y2 gelijk zijn en x1 en x2 verschillen
• Verticale gradiënten worden gemaakt wanneer x1 en x2 gelijk zijn en y1 en y2 verschillen
• Hoekverlopen worden gemaakt wanneer x1 en x2 verschillen en y1 en y2 verschillen

voorbeeld 1

Definieer een ellips met een horizontale lineaire gradiënt van geel naar rood:

Hier is de SVG-code:

Code uitleg:

• Het id-attribuut van de tag <linearGradient> definieert een unieke naam voor het verloop
• De x1, x2, y1,y2 attributen van de <linearGradient> tag definiëren de begin- en eindpositie van het verloop
• Het kleurbereik voor een verloop kan uit twee of meer kleuren bestaan. Elke kleur wordt gespecificeerd met een <stop> tag. Het offset-attribuut wordt gebruikt om te definiëren waar de kleurovergang begint en eindigt
• Het vulkenmerk koppelt het ellipselement aan het verloop

Voorbeeld 2

Definieer een ellips met een verticaal lineair verloop van geel naar rood:

Hier is de SVG-code:

Voorbeeld 3

Definieer een ellips met een horizontaal lineair verloop van geel naar rood en voeg een tekst toe binnen de ellips:

Hier is de SVG-code:

Code uitleg:

• Het <text> element wordt gebruikt om een ​​tekst toe te voegen