SVG linearGradient-Element und lineare Farbverläufe - HTML lernen

Ein linearer Farbverlauf ist ein fließender Übergang von einer Farbe zu einer anderen entlang einer geraden Linie. In SVG wird er mit zwei zusammenarbeitenden Elementen erstellt: einem <linearGradient>, das die Richtung und das Koordinatensystem der Linie definiert, sowie einem oder mehreren <stop>-Kindern, die Farben entlang der Linie platzieren. Anschließend verweist man den fill-Wert (oder stroke) einer Form auf den Farbverlauf über seine id mit fill="url(#myGradient)".

Diese Seite behandelt das Element <linearGradient>, seine <stop>-Kinder, die Koordinaten x1/x2/y1/y2 zur Ausrichtung des Farbverlaufs sowie die Attribute gradientUnits und spreadMethod, die steuern, wie er zugeordnet und gekachelt wird.

Beschreibung von SVG-Farbverläufen

Ein Farbverlauf ist eine sanfte Farbmischung, die als Farbe für beliebig viele Formen wiederverwendet werden kann. SVG verfügt über zwei Hauptarten von Farbverläufen:

linear — Farben werden entlang einer geraden Linie gemischt (diese Seite).
radial — Farben werden von einem Mittelpunkt nach außen gemischt. Siehe SVG radialGradient.

Das Element `<linearGradient>`

Das Element <linearGradient> definiert einen linearen Farbverlauf, der grafische Elemente füllt (oder umrandet). Es ist eine Definition, keine sichtbare Form, und lebt daher innerhalb eines <defs>-Blocks, erhält eine id und wird von einer Form mit fill="url(#id)" referenziert.

Die Richtung des Farbverlaufs wird durch den Startpunkt (x1, y1) und den Endpunkt (x2, y2) festgelegt. Die Farbverlaufslinie verläuft vom Startpunkt zum Endpunkt; Farben werden entlang dieser Linie interpoliert.

Lineare Farbverläufe können horizontal, vertikal oder schräg sein:

Horizontal — y1 und y2 sind gleich, während x1 und x2 verschieden sind.
Vertikal — x1 und x2 sind gleich, während y1 und y2 verschieden sind.
Schräg (diagonal) — sowohl das x-Paar als auch das y-Paar sind verschieden.

Info

Wenn Sie die Koordinaten weglassen, sind die SVG-Standardwerte x1="0%", y1="0%", x2="100%", y2="0%" — ein von links nach rechts verlaufender horizontaler Farbverlauf.

Gefahr

Verwechseln Sie einen SVG-Farbverlauf nicht mit der CSS-Funktion linear-gradient. CSS-Farbverläufe gestalten HTML-Elemente über background-image, während SVG-Farbverläufe SVG-Formen über fill oder stroke gestalten.

Das Element `<stop>`

Jedes <stop> platziert eine einzelne Farbe an einer Position entlang der Farbverlaufslinie. Sie benötigen mindestens zwei Stopps, um einen Übergang zu sehen. Stopps können mit Präsentationsattributen (stop-color, stop-opacity) oder mit entsprechendem CSS innerhalb eines style-Attributs gestaltet werden, wie in den folgenden Beispielen.

Attribut	Beschreibung
`offset`	Die Position des Stopps entlang der Farbverlaufslinie, als Zahl `0`–`1` oder als Prozentwert `0%`–`100%`. `0%` ist der Startpunkt, `100%` ist der Endpunkt.
`stop-color`	Die Farbe des Stopps. Akzeptiert jede CSS-Farbe (benannt, `#hex`, `rgb()`, `hsl()`). Standardwert ist `black`.
`stop-opacity`	Die Deckkraft der Stopp-Farbe, von `0` (transparent) bis `1` (undurchsichtig). Standardwert ist `1`.

Beispiel des Elements `<linearGradient>` zum Erstellen einer Ellipse mit einem horizontalen linearen Farbverlauf:

<!DOCTYPE html>
<html>
  <body>
    <svg height="200" width="300">
      <defs>
        <linearGradient id="ellipse" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color:rgb(28, 135, 201);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(128, 0, 128);stop-opacity:1" />
        </linearGradient>
      </defs>
      <ellipse cx="150" cy="90" rx="105" ry="65" fill="url(#ellipse)" />
    </svg>
  </body>
</html>

Probier es selbst »

Beispiel des Elements `<linearGradient>` zum Erstellen einer Ellipse mit einem vertikalen linearen Farbverlauf:

<!DOCTYPE html>
<html>
  <body>
    <svg height="300" width="400">
      <defs>
        <linearGradient id="ellipse" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" style="stop-color:rgb(28, 135, 201);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(128, 0, 128);stop-opacity:1" />
        </linearGradient>
      </defs>
      <ellipse cx="250" cy="100" rx="110" ry="70" fill="url(#ellipse)" />
    </svg>
  </body>
</html>

Probier es selbst »

Beispiel eines schrägen (diagonalen) linearen Farbverlaufs:

Standardmäßig ist gradientUnits auf objectBoundingBox gesetzt, sodass die Koordinaten Bruchteile des Begrenzungsrahmens der Form sind. Mit x1="0" y1="0" x2="1" y2="1" verläuft die Farbverlaufslinie von der oberen linken Ecke zur unteren rechten Ecke und erzeugt eine diagonale Mischung.

<!DOCTYPE html>
<html>
  <body>
    <svg height="200" width="300">
      <defs>
        <linearGradient id="diagonal" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" style="stop-color:rgb(28, 135, 201);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(128, 0, 128);stop-opacity:1" />
        </linearGradient>
      </defs>
      <rect x="20" y="20" width="260" height="160" fill="url(#diagonal)" />
    </svg>
  </body>
</html>

Das Attribut `gradientUnits`

gradientUnits legt fest, wie x1, y1, x2 und y2 interpretiert werden:

objectBoundingBox (Standard) — Koordinaten sind relativ zur gezeichneten Form, wobei 0 (oder 0%) eine Kante und 1 (oder 100%) die gegenüberliegende Kante darstellt. Der Farbverlauf dehnt sich automatisch an jede Form an.
userSpaceOnUse — Koordinaten sind absolute Positionen im Benutzerkoordinatensystem des SVG (dieselben Einheiten wie die eigenen x/y-Koordinaten der Form).

Ein häufiger Fallstrick: Mit userSpaceOnUse verfolgen Prozent- und 0–1-Koordinaten die Form nicht mehr. Sie müssen echte Koordinaten angeben (z. B. x1="20" y1="0" x2="280" y2="0"), die die Form überschneiden, da sonst die Füllung flach erscheinen kann (eine einzelne Farbe), weil die Farbverlaufslinie die Form nie kreuzt.

Das Attribut `spreadMethod`

spreadMethod steuert, was außerhalb des Segments [x1,y1]–[x2,y2] passiert, wenn die Farbverlaufslinie kürzer als die Form ist. Es hat nur einen sichtbaren Effekt, wenn der Farbverlauf nicht bereits die gesamte Form überspannt.

Wert	Verhalten
`pad` (Standard)	Die Farben des ersten und letzten Stopps werden ausgedehnt ("aufgefüllt"), um den verbleibenden Bereich zu füllen.
`reflect`	Der Farbverlauf spiegelt sich hin und her und wiederholt sich in abwechselnden Richtungen.
`repeat`	Der Farbverlauf wird gekachelt und springt vom letzten Stopp zurück zum ersten und wiederholt sich.

<!DOCTYPE html>
<html>
  <body>
    <svg height="120" width="300">
      <defs>
        <linearGradient id="repeated" x1="0" y1="0" x2="0.2" y2="0"
                        spreadMethod="repeat">
          <stop offset="0%" stop-color="rgb(28, 135, 201)" />
          <stop offset="100%" stop-color="rgb(128, 0, 128)" />
        </linearGradient>
      </defs>
      <rect x="0" y="0" width="300" height="120" fill="url(#repeated)" />
    </svg>
  </body>
</html>

Ändern Sie spreadMethod="repeat" im obigen Beispiel zu reflect oder pad, um die drei Verhaltensweisen zu vergleichen: repeat erzeugt harte Farbsprünge, reflect erzeugt einen sanften Ping-Pong-Effekt, und pad zeigt den Farbverlauf einmal und dann einen einfarbigen Block der letzten Farbe.

Attribute

Wert	Beschreibung
gradientUnits	Dieses Attribut legt das Koordinatensystem für die Attribute x1, x2, y1, y2 fest. Werte: `userSpaceOnUse`, `objectBoundingBox`.
gradientTransform	Dieses Attribut gibt dem Koordinatensystem des Farbverlaufs eine zusätzliche Transformation.
href	Dieses Attribut gibt einen Verweis auf ein anderes `<linearGradient>`-Element an.
spreadMethod	Dieses Attribut legt fest, wie sich der Farbverlauf verhält, wenn er innerhalb der Grenzen der Form beginnt oder endet, die den Farbverlauf enthält. Werte: `pad`, `repeat`, `reflect`.
x1	Dieses Attribut gibt die x-Koordinate des Anfangspunkts des Vektorfarbverlaufs an, entlang dem der lineare Farbverlauf gezeichnet wird.
x2	Dieses Attribut gibt die x-Koordinate des Endpunkts des Vektorfarbverlaufs an, entlang dem der lineare Farbverlauf gezeichnet wird.
y1	Dieses Attribut gibt die y-Koordinate des Anfangspunkts des Vektorfarbverlaufs an, entlang dem der lineare Farbverlauf gezeichnet wird.
y2	Dieses Attribut gibt die y-Koordinate des Endpunkts des Vektorfarbverlaufs an, entlang dem der lineare Farbverlauf gezeichnet wird.

Das SVG-Element <linearGradient> unterstützt auch die Globalen Attribute und Ereignisattribute.

Für radiale Farbmischungen, die von einem Mittelpunkt nach außen strahlen statt entlang einer Linie, siehe SVG radialGradient.

Übungen

Übung

Welches Attribut platziert eine einzelne Farbe an einer Position entlang einer SVG-Farbverlaufslinie?

Das offset-Attribut eines stop-Elements.Das spreadMethod-Attribut.Das gradientUnits-Attribut.Das stop-opacity-Attribut.

Übung

Wählen Sie alle zutreffenden Antworten: Was bewirken die Attribute x1, y1, x2 und y2 bei einem linearGradient? (Alle zutreffenden auswählen)

Sie legen den Start- und Endpunkt der Farbverlaufslinie fest.Sie passen die Farbe des Farbverlaufs an.Sie bestimmen die Ausrichtung: horizontal, vertikal oder diagonal.Sie definieren die Dauer einer SVG-Animation.

Beschreibung von SVG-Farbverläufen

Das Element <linearGradient>

Das Element <stop>

Beispiel des Elements <linearGradient> zum Erstellen einer Ellipse mit einem horizontalen linearen Farbverlauf:

Beispiel des Elements <linearGradient> zum Erstellen einer Ellipse mit einem vertikalen linearen Farbverlauf: