SVG Gradient - Linear

SVG Gradient

Der Gradient ist ein glatter Übergang von einer zu einer anderen Farbe zu Farbe. Außerdem kann der Übergang zu einer Vielzahl von Farben auf dem gleichen Element angewendet werden.

Es gibt zwei Hauptarten von SVG Gradient:

linear
radial

SVG linearen Gradienten - <linearGradient>

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

<LinearGradient> Tag muss innerhalb von <defs> Innen verschachtelt werden. <Defs> -Tag ist die Abkürzung Definitionen, wie zum Beispiel spezielle Elemente, die wie Gradienten definiert werden können.

Linearer Gradient kann als horizontal, vertikal oder Winkel Gradienten definiert werden:

Wenn y1 und y2 gleich groß sind, aber nicht beide x1 und x2, erstellen Sie einen horizontalen Gradienten
Wenn x1 und x2 gleich, Y1 und Y2 nicht gleich sind, können Sie einen vertikalen Verlauf erstellen
Wenn x1 und x2 sind unterschiedlich und y1 und y2 sind nicht die gleichen, können Sie einen Steigungswinkel erstellen

Beispiel 1

Er definiert den horizontalen linearen Gradienten von gelb bis rot oval:

Hier ist der SVG-Code:

Beispiele

Versuchen »

Für Opera Benutzer: Ansicht SVG - Datei (Rechtsklick auf die Vorschau Quelle SVG - Grafiken).

-Code - Analyse:

id-Attribut <linearGradient> -Tag können Sie einen eindeutigen Namen für den Gradienten Definition sein
<LinearGradient> -Tag X1, X2, Y1, Y2 definiert Attribut den Anfang und das Ende des Gradienten
Gradient Farbbereich von zwei oder mehr Farben. Jede Farbe von einem <stop> -Tag angeben. Offset verwendet wird, um die Start- und Endposition des Gradienten zu definieren.
Füllen Eigenschaftselement zum Gradienten der Ellipse zu verbinden