SVG-Verläufe - Linear

SVG-Verläufe

Ein Farbverlauf ist ein fließender Übergang von einer Farbe zur anderen. Außerdem können mehrere Farbübergänge auf dasselbe Element angewendet werden.

Es gibt zwei Haupttypen von Farbverläufen in SVG:

• Linear
• Radial

Linearer SVG-Verlauf - <linearGradient>

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

Das <linearGradient>-Element muss in einem <defs>-Tag verschachtelt sein. Das <defs>-Tag ist die Abkürzung für Definitionen und enthält die Definition spezieller Elemente (z. B. Farbverläufe).

Lineare Farbverläufe können als horizontale, vertikale oder Winkelverläufe definiert werden:

• Horizontale Farbverläufe entstehen, wenn y1 und y2 gleich sind und x1 und x2 unterschiedlich sind
• Vertikale Farbverläufe werden erstellt, wenn x1 und x2 gleich sind und y1 und y2 unterschiedlich sind
• Winkelverläufe entstehen, wenn sich x1 und x2 und y1 und y2 unterscheiden

Beispiel 1

Definieren Sie eine Ellipse mit einem horizontalen linearen Farbverlauf von Gelb nach Rot:

Hier ist der SVG-Code:

Code-Erklärung:

• Das id-Attribut des <linearGradient>-Tags definiert einen eindeutigen Namen für den Farbverlauf
• Die Attribute x1, x2, y1,y2 des Tags <linearGradient> definieren die Start- und Endposition des Farbverlaufs
• Der Farbbereich für einen Farbverlauf kann aus zwei oder mehr Farben bestehen. Jede Farbe wird mit einem <stop>-Tag angegeben. Das Offset-Attribut wird verwendet, um zu definieren, wo die Verlaufsfarbe beginnt und endet
• Das Füllattribut verknüpft das Ellipsenelement mit dem Farbverlauf

Beispiel 2

Definieren Sie eine Ellipse mit einem vertikalen linearen Verlauf von Gelb nach Rot:

Hier ist der SVG-Code:

Beispiel 3

Definieren Sie eine Ellipse mit einem horizontalen linearen Verlauf von Gelb nach Rot und fügen Sie einen Text in die Ellipse ein:

Hier ist der SVG-Code:

Code-Erklärung:

• Das Element <text> wird verwendet, um einen Text hinzuzufügen