SVG/Farben/Verläufe
Sie können Farbverläufe zentral im Definitionsabschnitt festlegen und über eine ID dem Element zuweisen. Somit kann ein Verlauf einmal festgelegt, aber beliebig oft referenziert werden.
Um einen Verlauf zu referenzieren, ruft man im fill-Attribut die URL mit der id auf: fill="url(#id)"
Inhaltsverzeichnis
Der lineare Farbverlauf[Bearbeiten]
Mit dem Element linearGradient legen Sie einen linearen Farbverlauf fest, der standardmäßig einem Vektor von links nach rechts folgt.
Folgende Angaben sind nötig:
x1
: horizontaler Startpunkty1
: vertikaler Startpunktx2
: horizontaler Endpunkty2
: vertikaler Endpunkt
<svg>
<defs>
<linearGradient id="verlauf1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#dfac20" />
<stop offset="100%" stop-color="#3983ab" />
</linearGradient>
<linearGradient id="verlauf2" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#dfac20" />
<stop offset="100%" stop-color="#3983ab" />
</linearGradient>
<linearGradient id="verlauf3" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#dfac20" />
<stop offset="100%" stop-color="#3983ab" />
</linearGradient>
</defs>
<rect id="eins" x="10" y="10" width="150" height="200" fill="url(#verlauf1)" />
<rect id="zwei" x="180" y="10" width="150" height="200" fill="url(#verlauf2)"/>
<rect id="drei" x="350" y="10" width="150" height="200" fill="url(#verlauf3)"/>
</svg>
Lineare Farbverläufe verlaufen ...
- horizontal, wenn y1 / y2 gleich und x1 / x2 verschieden sind
- vertikal, wenn y1 / y2 verschieden und x1 / x2 gleich sind
- schräg, wenn x1 / x2 verschieden und y1 / y2 verschieden sind
gradientTransform[Bearbeiten]
Die optionale Angabe …
gradientTransform
: dient einer möglichen Transformation (Richtungsänderung) des Verlaufs
Folgende Funktionen sind möglich:
translate()
: Verschiebungrotate()
: Drehungscale()
: Streckungskew()
: Neigen, Verzerrenmatrix()
: Transformieren durch Angabe der Transformationsmatrix
Farben, Positionen und Transparenz eines Farbverlaufs[Bearbeiten]
Mit dem stop-Element lässt sich ein Color-Stop festlegen, der die Eigenschaften Farbe, deren Position und deren Transparenz setzt.
<stop offset="0%" stop-color="black" stop-opacity="100%" />
Folgende Angaben sind möglich:
offset
: regelt die Position der Farbe (erlaubte Werte 0-1 oder 0%-100%)stop-color
: setzt die Farbestop-opacity
: regelt die Transparenz der Farbe (erlaubte Werte siehe offset)
Der radiale Farbverlauf[Bearbeiten]
Das radialGradient-Element erzeugt einen Farbübergang anhand eines Kreises. Auch hier folgt der Verlauf einem Vektor, der jedoch vom Mittelpunkt nach außen gerichtet ist.
Folgende Angaben sind möglich:
cx
: horizontaler Mittelpunkt (Standardwert für alle Attribute cx, cy, fx, fy und r ist 0.5 bzw. 50%)cy
: vertikaler Mittelpunktfx
: horizontaler Brennpunkt (verschiebt die Stelle mit der höchsten Farbintensität vom Mittelpunkt an einen anderen Punkt)fy
: vertikaler Brennpunktr
: Radius
<radialGradient id="verlauf1" >
<stop offset="0%" stop-color="#dfac20" />
<stop offset="100%" stop-color="#3983ab" />
</radialGradient>
<radialGradient id="verlauf2" cx="1" cy=".5" r=".5" >
<stop offset="0%" stop-color="#dfac20" />
<stop offset="100%" stop-color="#3983ab" />
</radialGradient>
<radialGradient id="verlauf3" cx="0" cy="0" r="0.3">
<stop offset="0%" stop-color="#dfac20" />
<stop offset="100%" stop-color="#3983ab" />
</radialGradient>
<radialGradient id="verlauf4" cx="0" cy="0" r="1" >
<stop offset="0%" stop-color="#dfac20" />
<stop offset="100%" stop-color="#3983ab" />
</radialGradient>
<radialGradient id="verlauf5" cx=".5" cy=".5" r=".5" fx="1" fy=".5">
<stop offset="0%" stop-color="#dfac20" />
<stop offset="100%" stop-color="#3983ab" />
</radialGradient>
<radialGradient id="verlauf6" cx=".5" cy=".5" r=".5" fx=".5" fy="1">
<stop offset="0%" stop-color="#dfac20" />
<stop offset="100%" stop-color="#3983ab" />
</radialGradient>
<radialGradient id="verlauf7" cx="0.2" cy="0.3" r="0.3" fx="0.5" fy="0.5">
<stop offset="0%" stop-color="#dfac20" />
<stop offset="100%" stop-color="#3983ab" />
</radialGradient>
<radialGradient id="verlauf8" cx=".5" cy="1" r=".9" fx=".3" fy="0">
<stop offset="0%" stop-color="#dfac20" />
<stop offset="100%" stop-color="#3983ab" />
</radialGradient>
gradientTransform
besitzt dieselbe Bedeutung wie bei den linearen Farbverläufen.
Wiederholung von Farbverläufen[Bearbeiten]
Sobald der Raum eines Farbübergangs mittels eines Vektors eingeschränkt wird, bleibt der Rest des Raums frei. Mit der Eigenschaft spreadMethod kann man den ungenutzten Teil ebenfalls füllen.
Die Werte des Attributs lauten:
pad
: der Verlauf wird abgeschnitten (Standard)reflect
: horizontale und vertikale Spiegelungrepeat
: Wiederholung
<defs>
<linearGradient id="verlauf1" x1="0%" x2="0%" y1="33%" y2="0%" spreadMethod="pad">
<stop offset="0%" stop-color="#3983ab" />
<stop offset="50%" stop-color="#c32e04" />
<stop offset="100%" stop-color="#dfac20" />
</linearGradient>
<linearGradient id="verlauf2" x1="0%" x2="0%" y1="50%" y2="0%" spreadMethod="reflect">
<stop offset="0%" stop-color="#3983ab" />
<stop offset="50%" stop-color="#c32e04" />
<stop offset="100%" stop-color="#dfac20" />
</linearGradient>
<linearGradient id="verlauf3" x1="0%" x2="0%" y1="25%" y2="0%" spreadMethod="repeat">
<stop offset="0%" stop-color="#3983ab" />
<stop offset="50%" stop-color="#c32e04" />
<stop offset="100%" stop-color="#dfac20" />
</linearGradient>
</defs>
In der unteren Reihe wurden auch die Werte für die fx- und fy-Attribute geändert.