CSS, HTML & Javascript mit {stil}

SVG linearGradient – Farbverlauf

Ein Verlauf oder Gradient ist also ein weicher Übergang von einer Farbe zu einer anderen Farbe und erzeugt Tiefe, Highlights und Reflexionen in Grafiken. Verläufe bilden belebte Hintergründe und sind die Grundlage für Schatten-Effekte (Drop Shadow).

SVG: linear Gradient und radial Gradient

Verlauf anlegen

SVG unterstützt zwei Arten von Verläufen: linearGradient und radialGradient (Kreisverlauf). Verläufe füllen Formen wie Kreise, Rechtecke, Pfade, Texte und Stroke mit Farben, die ohne sichtbare Grenzen ineinander verlaufen.

Ein Verlauf wird in einem <linearGradient>- bzw. <radialGradient>-Element definiert und einer Form im fill-Attribut zugewiesen.

linearGradient – linearer Verlauf

In einem linearen Verlauf gehen die Farben auf einer geraden Linie ineinander über. SVG Stops sind die Koordinaten eines Farbursprungs auf der Linie. Für einen Verlauf braucht ein SVG-Gradient mindestens zwei Farb-Stops.

linearGradient und radialGradient liegen in einem defs-Tag. In defs liegen Anweisungen, die mehrfach im Dokument benutzt werden können, die aber erst sichtbar werden, wenn sie durch einen Link aufgerufen werden.

                                   Verlaufsvektor
                              +----------------------+
<defs>                        |                      |
<linearGradient id="lgrad1" x1="0" y1="0" x2="1" y2="0">
    <stop offset="0" stop-color="hsl(220,40%,75%)" />
    <stop offset="1" stop-color="hsl(220,40%,30%)" />
</linearGradient>
</defs>

<rect width="300" height="100" x="0" y="0" fill="url(#lgrad1)" />
                                                      |
                                                      |
           Aufruf des Gradient als URL mit der ID ----+

Die Koordinaten der Verlaufslinie und der Farbstops können als Prozentangaben von 0% bis 100% oder als Werte zwischen 0 bis 1 geschrieben werden.

<linearGradient x1="0" y1="0" x2="1" y2="0" id="g1">
<linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="g1">

Color Stops

Auf der Strecke können beliebig viele Color Stops liegen. Je enger die Color Stops beieinander liegen, desto härter wird der Übergang zwischen den benachtbarten Farben.

objectBoundingBox und userSpaceOnUse

Die Strecke, über die sich der Verlauf erstreckt, ist entweder relativ zum gefüllten Element (objectBoundingBox, default) oder relativ zum Dokument gradientUnits="userSpaceOnUse".

SVG Verlauf rotieren

gradientTransform="rotate(66)" dreht den Verlauf um 66° innerhalb des Elements um seinem Ursprung bei 0,0.

gradientTransform="rotate(65)"

<linearGradient id="rotate1" href="#diagonal" gradientTransform="rotate(66)" />
<linearGradient id="rotate2" href="#diagonal" x1="0" y1="0" x2="0.41" y2="0.9" />
<rect y="0" x="0" height="200" width="200" fill="url(#rotate1)" />
<rect y="0" x="200" height="200" width="200" fill="url(#rotate2)" />

Um einen SVG-Gradient um sein Zentrum zu rotieren, müssen die Werte für x1, y1, x2 und y2 berechnet werden: Back to school und Sinus und Cosinus hervorkramen.

0
let pi = 0 * (Math.PI / 180);
let x1 = Math.round(50 + Math.sin(pi) * 50) / 100;           //
let y1 = Math.round(50 + Math.cos(pi) * 50) / 100;           //
let x2 = Math.round(50 + Math.sin(pi + Math.PI) * 50) / 100; //
let y2 = Math.round(50 + Math.cos(pi + Math.PI) * 50) / 100; //

Wiederholung und Reflexion: spreadMethod

SVG Verläufe mit spreadMethod="repeat" oder spreadMethod="reflect" erstellen ein Muster von Säulen oder Rohren.

Wenn der Verlaufsvektor kürzer als die Box des Elements ist, werden der erste und der letzte Color Stop auf die Größe der Box ausgedeht. Dieses Verhalten wird als »pad« bezeichnet und ist der Default.

Alternativ kann der Verlauf auch wiederholt (repeat) oder wiederholt reflektiert (reflect) werden – darüber entscheidet die spreadMethod des Gradients.

Vererbung: href

Ein Verlauf kann mehrere Element mit unterschiedlichen Attributen füllen. Ein Gradient oder Verlauf, der mit href="#link" auf die ID eines anderen Verlaufs verweist, erbt seine Eigenschaften und kann sie durch eigene Attribute überschreiben.

<svg viewBox="0 0 300 300" width="300" height="300">
    <defs>
        <linearGradient id="link" x1="0" y1="0" x2="100%" y2="0">
            <stop offset="0" stop-color="hsl(260, 80%, 80%)" />
            <stop offset="10%" stop-color="hsl(260, 30%, 20%)" />
            <stop offset="20%" stop-color="hsl(220, 80%, 80%)" />
        </linearGradient>
    <linearGradient id="rect1" href="#link" x1="0" y1="0" x2="100%" y2="100%" />
    <linearGradient id="rect2" href="#link" x1="0" y1="0" x2="100%" y2="0" />
    …
    </defs>

    <rect width="100" height="100" x="100" y="0" fill="url(#rect2)" />
    <rect width="100" height="100" x="200" y="100" fill="url(#rect3)" />
    <rect width="100" height="100" x="100" y="200" fill="url(#rect4)" />
    <rect width="100" height="100" x="0" y="100" fill="url(#rect1)" />
</svg>

linearGradient Attribute

id
Eindeutiger Identifier des Verlaufs
x1 y1
Start des Richtungs-Vektors des Verlaufs
x2 y2
Ende des Richtungs-Vektors
gradientUnits
objectBoundingBox, userSpaceOnUse: Koordinatensystem des Verlaufsvektors
spreadMethod
pad, repeat, reflect: Bei einem Verlaufvektor, der sich nicht über die Breite des Elements erstreckt, Wiederholungen oder Reflexionen festzulegen (nicht Safari)
href
Verweis auf einen Gradient, um seine Stops zu erben, aber andere Eigenschaften zu ändern.
xlink:href
Die inzwischen veraltete Schreibweise des href-Attributes

Stop Attribute

Stops sitzen innerhalb des Gradient-Tags und legen die Punkte fest, an denen sich die Farben des Verlaufs ändern.

offset
Ankerpunkt einer Farbe
stop-color
Angabe der Farbe (Hex, rgb, hsl, Farbname)
stop-opacity
Transparenz bwz. Deckkraft der Farbe
Suchen auf mediaevent.de