CSS, HTML und Javascript mit {stil}

SVG Gradient / Verlauf

SVG Gradient, Verlauf mit SVGgradient

SVG unterstützt zwei Arten von Verläufen: linearGradient und radialGradient. Verläufe füllen Formen wie Kreise, Rechtecke, Pfade, Texte und Strokes.

Ein Verlauf oder Gradient ist ein weicher Übergang von einer Farbe zu einer anderen Farbe und erzeugt Tiefe, Highlights und Reflexionen in Grafiken.

Holla

linearGradient

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.

<defs>
<linearGradient id="lgrad1" x1="0" y1="0" x2="1" y2="0">
                            |                         |
                            +---- Verlaufsvektor  ----+

    <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">

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.

<linearGradient id="lgstop" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="hsl(180,40%,75%)" />
    <stop offset="100%" stop-color="hsl(180,40%,30%)" />
</linearGradient>

Koordinaten: userSpaceOnUse

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

<linearGradient gradientUnits="userSpaceOnUse" … >

IE9 unterstützt zwar gradientUnits="userSpaceOnUse", aber führt kein Update aus, wenn gradientUnits durch Javascript geändert wird.

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.

<svg viewBox="0 0 300 100" width="100%" height="100px">
<defs>
<linearGradient id="spread" spreadMethod="pad" 
                x1="50%" x2="70%" y1="0%" y2="0%">
    <stop offset="0%" stop-color="hsl(220,40%,50%)" />
    <stop offset="33%" stop-color="hsl(220,40%,80%)" />
    <stop offset="66%" stop-color="hsl(250,40%,40%)" />
    <stop offset="100%" stop-color="hsl(220,40%,60%)" />
</linearGradient>
</defs>
<rect width="300" height="100" x="0" y="0" fill="url(#spread)" />
</svg>
PAD
REPEAT
REFLECT

Safari – Desktop und iOS – ignoriert spreadMethod="repeat" und spreadMethod="reflect". Kann man u.U. mit pattern – einem Muster – simulieren.

Für IE9 gilt auch hier, dass zwar IE Support für spreadMethod pad, reflect und repeat bietet, aber beim Ändern durch Javascript das Element nicht neu rendert.

Vererbung: xlink:href

Ein Verlauf kann mehrere Element mit unterschiedlichen Attributen füllen. Ein Gradient oder Verlauf, der mit xlink: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" xlink:href="#link" x1="0" y1="0" x2="100%" y2="100%" />
    <linearGradient id="rect2" xlink: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)
xlink:href
Verweis auf einen Gradient, um seine Stops zu erben, aber andere Eigenschaften zu ändern.

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

radialGradient

Bei einem radialen Gradienten oder Verlauf treten Kreiskoordinaten (cx, cy und Radius r) anstelle der Koordinaten einer Linie.

Bei einem Element von gleiche Höhe und Breite entsteht ein kreisförmiger Verlauf, bei rechteckigen Elementen nimmt der Verlauf die Form einer Ellipse an. Wenn cx, cy und r nicht angegeben werden, geht der Kreisverlauf vom Zentrum des Objekts kreisförmig nach außen.

<defs>
    <radialGradient id="c1" cx="0.5" cy="0.5" r="0.5">
        <stop offset="0" stop-color="hsl(30,80%,90%)" />
        <stop offset=".5" stop-color="hsl(40,60%,60%)" />
        <stop offset="1" stop-color="hsl(30,50%,40%)" />
    </radialGradient>
</defs>

<rect width="500" height="500" x="0" y="0" fill="url(#c1)" />
cx
cy
r
<rect width="300" height="100" x="0" y="0" fill="url(#c1)" />

Das Koordinatenpaar fx und fy verlagert den Brennpunkt innerhalb des radialen Verlaufs. Der radiale Verlauf füllt weiterhin die Breite und die Höhe des Objekts aus und bildet einen Kreis, aber der Brennpunkt verschiebt sich entsprechend den Koordinaten fx und fy.

<radialGradient id="c2" fx="0.2" fy="0.4">
</radialGradient>

Konischer Verlauf

Was SVG nicht bietet, ist ein konischer Kreisverlauf – also ein Farbrad. Das Farbrad mit dem konischen Verlauf im folgenden Beispiel ist eine Näherung an einen konischen Verlauf und besteht aus 360 Pfaden mit linearen Verläufen.

SVG konischer Verlauf

Gefunden auf openclipart.org