Přechody SVG – lineární

Přechody SVG

Gradient je plynulý přechod z jedné barvy do druhé. Kromě toho lze na stejný prvek použít několik barevných přechodů.

V SVG existují dva hlavní typy přechodů:

• Lineární
• Radiální

SVG Lineární Gradient - <linearGradient>

Prvek <linearGradient> se používá k definování lineárního přechodu.

Element <linearGradient> musí být vnořen do značky <defs>. Tag <defs> je zkratka pro definice a obsahuje definici speciálních prvků (jako jsou přechody).

Lineární přechody lze definovat jako horizontální, vertikální nebo úhlové přechody:

• Vodorovné přechody se vytvoří, když jsou y1 a y2 stejné a x1 a x2 se liší
• Vertikální gradienty se vytvoří, když jsou x1 a x2 stejné a y1 a y2 se liší
• Úhlové přechody se vytvoří, když se x1 a x2 liší a y1 a y2 se liší

Příklad 1

Definujte elipsu s vodorovným lineárním přechodem od žluté k červené:

Zde je kód SVG:

Vysvětlení kódu:

• Atribut id tagu <linearGradient> definuje jedinečný název přechodu
• Atributy x1, x2, y1,y2 tagu <linearGradient> definují počáteční a koncovou polohu přechodu
• Barevný rozsah pro přechod může být složen ze dvou nebo více barev. Každá barva je specifikována tagem <stop>. Atribut offset se používá k definování, kde začíná a končí barva přechodu
• Atribut výplně spojuje prvek elipsy s přechodem

Příklad 2

Definujte elipsu se svislým lineárním přechodem od žluté k červené:

Zde je kód SVG:

Příklad 3

Definujte elipsu s vodorovným lineárním přechodem od žluté po červenou a přidejte text do elipsy:

Zde je kód SVG:

Vysvětlení kódu:

• Prvek <text> se používá k přidání textu