SVG-Gradients – lineare und radiale Beispiele

SVG-gradients erzeugen weiche Farbübergänge, die SVG-Formen, Text und paths füllen oder konturieren können. Dieses Tutorial erklärt, wie <linearGradient>, <radialGradient>, <stop>, fill="url(#id)" und stroke="url(#id)" im SVG-Markup zusammenarbeiten.

Quick Answer: Definieren Sie einen gradient in <defs>, geben Sie ihm eine id, fügen Sie <stop>-Elemente mit offset und stop-color hinzu und referenzieren Sie den gradient von einer Form oder einem Textelement mit fill="url(#id)" oder stroke="url(#id)".

1<svg width="220" height="120" xmlns="http://www.w3.org/2000/svg">
2  <defs>
3    <linearGradient id="brand-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
4      <stop offset="0%" stop-color="steelblue" />
5      <stop offset="100%" stop-color="gold" />
6    </linearGradient>
7  </defs>
8  <rect x="20" y="20" width="180" height="80" fill="url(#brand-gradient)" />
9</svg>

In diesem Artikel lernen Sie, wie Sie:

wiederverwendbare SVG-gradient-Definitionen in <defs> erstellen;
lineare und radiale gradients auf fill und stroke anwenden;
gradient direction, focal point und color stops steuern;
häufige Probleme mit id, url(#id), offset und gradientUnits vermeiden;
verwandte Aspose.SVG-Artikel nutzen, wenn Sie gradients programmgesteuert erstellen oder bearbeiten müssen.

SVG Gradients

Ein gradient ist ein weicher Farbübergang zwischen Punkten auf einer Zeichenfläche. SVG unterstützt zwei zentrale Gradient-Elemente: <linearGradient> und <radialGradient>. Beide sind paint servers. Das bedeutet: Sie werden einmal definiert und anschließend von sichtbaren Elementen referenziert.

Platzieren Sie <linearGradient> oder <radialGradient> in <defs>, damit der gradient wiederverwendet werden kann. Das Attribut id gibt dem gradient einen Namen, und sichtbare Elemente verweisen mit fill="url(#id)" oder stroke="url(#id)" darauf. Dadurch bleibt der Farbübergang getrennt von den Formen, Texten oder paths, die ihn verwenden.

So erstellen Sie SVG-Gradients

Fügen Sie einen <defs>-Block hinzu, um wiederverwendbare gradient-Definitionen zu speichern.
Wählen Sie <linearGradient> für einen geraden Farbübergang oder <radialGradient> für einen Übergang, der von einem Mittelpunkt oder focal point ausstrahlt.
Setzen Sie eine eindeutige id, damit sichtbare Elemente den gradient referenzieren können.
Fügen Sie <stop>-Elemente mit ansteigenden offset-Werten und stop-color-Werten hinzu.
Wenden Sie den gradient mit fill="url(#id)" oder stroke="url(#id)" an.
Passen Sie x1, y1, x2, y2, cx, cy, r, fx, fy oder gradientUnits an, wenn Richtung oder Skalierung nicht wie erwartet aussehen.

SVG Linear Gradient

Ein linear gradient ändert die Farbe entlang einer geraden Linie, dem gradient vector. Die Attribute x1, y1, x2 und y2 definieren diesen Vektor. Mit dem Standard gradientUnits="objectBoundingBox" werden Werte normalerweise als Prozente oder Bruchteile von 0 bis 1 geschrieben. Mit gradientUnits="userSpaceOnUse" werden sie im aktuellen SVG-Koordinatensystem interpretiert.

Das Element <linearGradient> enthält verschachtelte <stop>-Elemente. Jeder stop definiert eine Farbe an einer bestimmten Position entlang des Vektors. Das Attribut offset setzt die Position, und die Farbe kann mit dem Attribut stop-color oder über CSS-style-Deklarationen gesetzt werden ( linear-gradient.svg).

 1<svg height="250" width="700" xmlns="http://www.w3.org/2000/svg">
 2	<defs>
 3		<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
 4			<stop offset="10%" style="stop-color:LIGHTSALMON" />
 5			<stop offset="50%" style="stop-color:TEAL" />
 6			<stop offset="90%" style="stop-color:LIGHTPINK" />
 7		</linearGradient>
 8	</defs>
 9    <ellipse cx="300" cy="170" rx="165" ry="55" fill="url(#grad1)" />
10    <text x="10" y="85" font-family="Arial" stroke="grey" stroke-width="1" font-size="90" fill="url(#grad1)" >Linear Gradient</text>
11</svg>

Linearer Gradient angewendet auf SVG-Text und eine Ellipse

Im Beispiel oben verwenden die Elemente <text> und <ellipse> beide fill="url(#grad1)". Sie teilen sich also dieselbe gradient-Definition. Die drei <stop>-Elemente erzeugen den sichtbaren Farbübergang von LIGHTSALMON über TEAL zu LIGHTPINK.

SVG Radial Gradient

Ein radial gradient ändert die Farbe nach außen von einem Mittelpunkt oder focal point. Die Attribute cx, cy und r definieren den Endkreis des gradients: cx und cy setzen seinen Mittelpunkt, r seinen Radius. Die Attribute fx und fy definieren den focal point, an dem der gradient visuell beginnt. Wenn cx und cy fehlen, ist der Standardwert für beide 50%; wenn fx und fy fehlen, übernehmen sie dieselben Werte wie cx und cy.

In diesem Beispiel nutzen center und focal point dieselben Koordinaten. Im Standard-Koordinatensystem objectBoundingBox bedeutet 0.5 die Mitte des Zielelements. Der radial gradient breitet sich daher gleichmäßig vom Zentrum aus ( radial-gradient.svg).

 1<svg height="300" width="600" xmlns="http://www.w3.org/2000/svg">
 2    <defs>
 3        <radialGradient id="myRG" cx="0.5" cy="0.5" r="0.9" fx="0.5" fy="0.5" spreadMethod="pad">
 4            <stop offset="0%" stop-color="BISQUE" />
 5            <stop offset="60%" stop-color="CADETBLUE" />
 6        </radialGradient>
 7    </defs>
 8    <ellipse cx="300" cy="170" rx="165" ry="55" fill="url(#myRG)" />
 9    <text x="10" y="85" font-family="Arial" stroke="grey" stroke-width="1" font-size="85" fill="url(#myRG)" >Radial Gradient</text>
10</svg>

Radialer Gradient angewendet auf SVG-Text und eine Ellipse

Das nächste Beispiel verschiebt den focal point aus dem Zentrum nach fx="25%" und fy="25%". Dadurch wandert der sichtbare Glanz in den oberen linken Bereich der gefüllten Form ( radial-gradient1.svg):

 1<svg height="300" width="600" xmlns="http://www.w3.org/2000/svg">
 2    <defs>
 3        <radialGradient id="myRG" cx="0.5" cy="0.5" r="0.8" fx="25%" fy="25%" spreadMethod="pad">
 4            <stop offset="0%" stop-color="BISQUE" />
 5            <stop offset="30%" stop-color="SILVER" />
 6            <stop offset="60%" stop-color="BISQUE" />
 7            <stop offset="90%" stop-color="GREY" />
 8        </radialGradient>
 9    </defs>
10    <ellipse cx="300" cy="170" rx="185" ry="65" fill="url(#myRG)" fill-opacity="1" />
11    <text x="10" y="85" font-family="Arial" stroke="grey" stroke-width="1" font-size="85" fill="url(#myRG)">Radial Gradient</text>
12</svg>

Radialer Gradient mit verschobenem focal point auf SVG-Text und Ellipse

Hier erzeugen mehrere color stops und ein focal point außerhalb der Mitte einen stärkeren Glanz auf der Ellipse. Das ist eine häufige Methode, um flache SVG-Geometrie räumlicher wirken zu lassen.

Häufige Fehler und Korrekturen

Problem	Ursache	Lösung
Gradient ist nicht sichtbar	Der gradient hat keine `id`, die Referenz ist falsch oder das Zielelement verwendet ihn nicht	Geben Sie dem gradient eine eindeutige `id`, referenzieren Sie ihn mit `url(#id)` und halten Sie Definitionen in `<defs>` übersichtlich
Gradient wird nicht auf eine Form angewendet	Falsche Referenz in `fill` oder `stroke`	Verwenden Sie `fill="url(#gradientId)"` oder `stroke="url(#gradientId)"` und stellen Sie sicher, dass die `id` übereinstimmt
Farben erscheinen in unerwarteter Richtung	Falsche Werte für `x1`, `y1`, `x2`, `y2`	Passen Sie die gradient vector attributes an, um die Richtung zu steuern
Radial gradient bedeckt nicht den erwarteten Bereich	Radius `r`, center, focal point oder `gradientUnits` passen nicht zur Zielform	Passen Sie `r`, `cx`, `cy`, `fx`, `fy` an oder setzen Sie `gradientUnits="userSpaceOnUse"`, wenn feste Koordinaten benötigt werden
Gradient skaliert unerwartet	Der Standard `gradientUnits="objectBoundingBox"` wird verwendet	Setzen Sie `gradientUnits="userSpaceOnUse"` für absolute Positionierung
Stops mischen sich nicht wie erwartet	`offset`-Werte fehlen, wiederholen sich unbeabsichtigt oder stehen nicht in der gewünschten Reihenfolge	Prüfen Sie, ob `offset`-Werte in der gewünschten Reihenfolge von `0%` bis `100%` stehen
Gradient ist vielfach dupliziert	Dieselben stops werden an mehreren Stellen wiederholt	Definieren Sie den gradient einmal in `<defs>` und verwenden Sie ihn mit `url(#id)` wieder

Schnelle Rezepte

Linearen gradient fill erstellen, horizontal

1<linearGradient id="gradHorizontal" x1="0%" y1="0%" x2="100%" y2="0%">
2    <stop offset="0%" stop-color="steelblue" />
3    <stop offset="100%" stop-color="lightblue" />
4</linearGradient>

Vertikalen linear gradient erstellen

1<linearGradient id="gradVertical" x1="0%" y1="0%" x2="0%" y2="100%">
2    <stop offset="0%" stop-color="orange" />
3    <stop offset="100%" stop-color="purple" />
4</linearGradient>

Gradient auf stroke statt fill anwenden

1<rect x="20" y="20" width="200" height="120"
2      fill="none"
3      stroke="url(#gradHorizontal)"
4      stroke-width="10" />

Zentrierten radial gradient erstellen

1<radialGradient id="radialCenter" cx="50%" cy="50%" r="50%">
2    <stop offset="0%" stop-color="white" />
3    <stop offset="100%" stop-color="darkblue" />
4</radialGradient>

Focal point eines radial gradient verschieben

1<radialGradient id="radialFocus" cx="50%" cy="50%" r="60%" fx="25%" fy="25%">
2    <stop offset="0%" stop-color="gold" />
3    <stop offset="100%" stop-color="brown" />
4</radialGradient>

Denselben gradient für mehrere Elemente wiederverwenden

1<circle cx="80" cy="80" r="50" fill="url(#gradHorizontal)" />
2<rect x="160" y="30" width="100" height="100" fill="url(#gradHorizontal)" />

FAQ – SVG Gradients

Wie wende ich einen SVG-gradient auf eine Form an?

Definieren Sie den gradient in <defs>, geben Sie ihm eine id und setzen Sie fill oder stroke der Zielform auf url(#id). Die Referenz muss exakt zur gradient-id passen.

Was ist der Unterschied zwischen linearGradient und radialGradient?

Verwenden Sie <linearGradient> für einen Farbübergang entlang einer geraden Linie. Verwenden Sie <radialGradient>, wenn sich die Farbe von einem Mittelpunkt oder focal point nach außen ausbreiten soll.

Kann ich einen SVG-gradient für stroke verwenden?

Ja. Definieren Sie den gradient in <defs> und setzen Sie stroke="url(#id)" auf dem Zielelement. Verwenden Sie ein ausreichend großes stroke-width, damit der gradient sichtbar wird.

Warum sieht derselbe gradient auf verschiedenen Formen unterschiedlich aus?

Standardmäßig ordnet gradientUnits="objectBoundingBox" den gradient der bounding box jedes Elements zu. Verwenden Sie gradientUnits="userSpaceOnUse", wenn Sie dieselbe koordinatenbasierte gradient-Position über mehrere Elemente hinweg benötigen.

Kann ich SVG-gradient-Farben programmgesteuert ändern?

Ja. In Python via .NET laden Sie das SVG und aktualisieren die stop-color-Attribute der <stop>-Elemente. Siehe SVG-Farben in Python ändern für einen Workflow, der gradient stops bearbeitet.