SVG Gradients - Linear

SVG Gradients

Ein Gradient ist ein glatter Übergang von einer Farbe zur anderen. Darüber hinaus können mehrere Farbübergänge auf dasselbe Element angewendet werden.

Es gibt zwei Hauptarten von Gradienten in SVG:

• Linear
• Radial

SVG Linear Gradient - <linearGradient>

Das <linearGradient> Element wird verwendet , um einen linearen Gradienten zu definieren.

Das <linearGradient> Element muss innerhalb eines verschachtelt werden <defs> -Tag. Das <defs> -Tag ist die Abkürzung für Definitionen und enthält Definition spezieller Elemente (such as gradients) .

Linearen Gradienten kann als horizontal, vertikal oder eckig Gradienten definiert werden:

• Horizontal-Gradienten werden erstellt, wenn y1 und y2 gleich sind und x1 und x2 unterscheiden
• Vertikale Steigungen werden erstellt, wenn x1 und x2 gleich sind und Y1 und Y2 unterscheiden
• Winkelverläufe entstehen, wenn x1 und x2 unterscheiden und Y1 und Y2 unterscheiden

Beispiel 1

Definieren Sie eine Ellipse mit einer horizontalen linearen Gradienten von gelb bis rot:

Hier ist der SVG-Code:

Code explanation:

• Das id - Attribut des <linearGradient> Tag definiert einen eindeutigen Namen für den Gradienten
• Die x1, x2, y1, y2 Attribute des <linearGradient> -Tag definieren die Anfangs- und Endposition des Gradienten
• Die Farbpalette für einen Gradienten können aus zwei oder mehreren Farben zusammengesetzt sein. Jede Farbe wird angegeben mit einem <stop> -Tag. Der offset - Attribut wird verwendet , um festzulegen , wo der Gradient Farbe beginnen und enden
• Die fill Attribut verknüpft die Ellipse - Element auf den Gradienten

Beispiel 2

Definieren Sie eine Ellipse mit einer vertikalen linearen Gradienten von gelb bis rot:

Hier ist der SVG-Code:

Beispiel 3

Definieren Sie eine Ellipse mit einer horizontalen linearen Gradienten von gelb bis rot, und fügen Sie einen Text innerhalb der Ellipse:

Hier ist der SVG-Code:

Code explanation:

• Der <text> Element wird verwendet , um einen Text hinzufügen