SVG/Farben/Verläufe

15min

mittel

SVG/Farben/Füllungen

SVG bot von Anfang an die Möglichkeit, Text und Grafikobjekte nicht nur flächig zu füllen, sondern sowohl Füllungen als auch Konturen mit Farbverläufen zu gestalten.

Diese Farbverläufe werden zentral im Definitionsabschnitt festgelegt und über eine ID gekennzeichnet. Um einen Verlauf zu referenzieren, ruft man im fill- oder stroke-Attribut eine URL-Funktion mit der id des Verlaufs auf: fill="url(#id)".

Somit kann ein Verlauf einmal festgelegt, aber beliebig oft referenziert werden.

Verläufe in SVG und CSS

Seit CSS3 gibt es ähnliche CSS-Funktionen, die in HTML allerdings nur den Hintergrund über background-image formatieren können. Sie sind aber - anders als die universell verwendbaren filter()-Funktionen - nicht auf die SVG-Präsentationsattribute wie fill und strokeanwendbar.

Verläufe in SVG müssen zwingend im SVG-Quelltext definiert sein! Sind Verläufe vorhanden, können Sie diese immerhin mit CSS umfärben, z.B. für den ersten Stop des Verlaufs verlaufname so:

svg #verlaufname stop:nth-child(1) {
  stop-color: white;
}

Der lineare Farbverlauf

Einen linearen Farbverlauf legen Sie mit dem linearGradient-Element fest. Standardmäßig folgt der Verlauf einem Vektor von links nach rechts.

Folgende Angaben sind optional:

• x1: horizontaler Startpunkt (Standard: 0%)
• x2: vertikaler Startpunkt (Standard: 0%)
• y1: horizontaler Endpunkt (Standard: 100%)
• y2: vertikaler Endpunkt (Standard: 0%)

Lineare Farbverläufe verlaufen ...

• horizontal, wenn y1 / y2 gleich und x1 / x2 verschieden sind (oder alle Angaben fehlen)
• vertikal, wenn y1 / y2 verschieden und x1 / x2 gleich sind
• schräg, wenn x1 / x2 verschieden und y1 / y2 verschieden sind

Beachten Sie: Die Werte der Attribute x1, y1, x2 und y2 sind keine Pixelwerte, sondern Prozentangaben. Sie beziehen sich auf das zu füllende Element.

Farben, Positionen und Transparenz eines Farbverlaufs

Mit dem stop-Element lässt sich ein Color-Stop festlegen, der die Position, Farbe und deren Transparenz setzt.

Folgende Angaben sind möglich:

• offset: regelt die Position der Farbe (erlaubte Werte 0-1 oder 0%-100%)
• stop-color: setzt die Farbe
• stop-opacity: regelt die Transparenz der Farbe

Beispiel

<stop offset="0%" stop-color="black" stop-opacity="100%" />

In diesem Beispiel sehen Sie drei verschiedene Verläufe:

lineare Verläufe ansehen …

	<defs>
		<linearGradient id="horizontal">
			<stop offset="0%" stop-color="yellow" />
			<stop offset="100%" stop-color="blue" />
		</linearGradient>
		<linearGradient id="vertikal" x1="0%" y1="0%" x2="0%" y2="100%">
				<stop offset="20%" stop-color="green" />
				<stop offset="50%" stop-color="yellow" />
				<stop offset="80%" stop-color="navy" />
		</linearGradient>
		<linearGradient id="diagonal" x1="0%" y1="0%" x2="100%" y2="100%">
				<stop offset="20%" stop-color="green" />
				<stop offset="50%" stop-color="yellow" />
				<stop offset="80%" stop-color="navy" />
		</linearGradient>
	</defs>

	<rect id="eins" x="10" y="10" width="150" height="200" fill="url(#horizontal)" />
	<rect id="zwei" x="200" y="10" width="150" height="200" fill="url(#vertikal)" />
	<rect id="drei" x="370" y="10" width="150" height="200" fill="url(#diagonal)" />

Verläufe mit CSS gestalten

Im SELF-Forum wurde 2013 gefragt, wie man Strahlen nach außen hin transparent werden lassen kann. Auch dies geht mit Verläufen:

heller werdender Verlauf ansehen …

#begin {
	stop-color: blue; 
	stop-opacity:1;
}
#end {
	stop-color: skyblue;  
	stop-opacity:0;
}

svg:hover #end {
	stop-color: lime;  
	stop-opacity:1;
}

In einem symbol-Element wird ein Strahl angelegt und mit dem Verlauf #grad1 gefüllt. In mehreren use-Elementen wird es referenziert und mit transform entsprechend gedreht.

Der Clou: die stop-color- und stop-opacity-Attribute sind Präsentationsattribute und können mit CSS gesetzt und bei :hover verändert werden. Probieren Sie es aus!

Wiederholung von Farbverläufen

Sobald der Raum eines Farbübergangs mittels eines Vektors eingeschränkt wird, bleibt der Rest des Raums frei. Mit dem spreadMethod-Attribut kann man den ungenutzten Teil ebenfalls füllen.

Die Werte des Attributs lauten:

• pad: der Verlauf wird abgeschnitten (Standard)
• reflect: horizontale und vertikale Spiegelung
• repeat: Wiederholung

Wiederholung von Verläufen ansehen …

	<defs>
		<linearGradient id="pad" spreadMethod="pad">
			<stop offset="20%" stop-color="#337799" />
			<stop offset="50%" stop-color="#dfac20" />
			<stop offset="80%" stop-color="#c82f04" /> </linearGradient>
		<linearGradient id="reflect" spreadMethod="reflect" x1="0%"
		x2="0%" y1="50%" y2="0%">
			<stop offset="20%" stop-color="#337799" />
			<stop offset="50%" stop-color="#dfac20" />
			<stop offset="80%" stop-color="#c82f04" /> </linearGradient>
		<linearGradient id="repeat" x1="0%" x2="0%" y1="25%" y2="0%"
		spreadMethod="repeat">
			<stop offset="20%" stop-color="#337799" />
			<stop offset="50%" stop-color="#dfac20" />
			<stop offset="80%" stop-color="#c82f04" />
		</linearGradient>
	</defs>
	<rect fill="url(#pad)" transform="translate(10,10)"
	/>
	<rect fill="url(#reflect)" transform="translate(290,10)"
	/>
	<rect fill="url(#repeat)" transform="translate(570,10)"
	/>

Der radiale Farbverlauf

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 ist 50%)
• cy: vertikaler Mittelpunkt (Standardwert ist 50%)
• r: Radius (Standardwert ist 50%)
• fx: horizontaler Brennpunkt (verschiebt die Stelle mit der höchsten Farbintensität vom Mittelpunkt an einen anderen Punkt, Standardwert ist der Wert von cx)
• fy: vertikaler Brennpunkt (Standardwert ist der Wert von cy)
• fr: Radius des Brennpunkts (Standardwert ist 0)

Wenn Sie nichts anderes angeben, liegt (fx,fy) an der gleichen Stelle wie (cx,cy) und fr ist 0, es handelt sich also um einen Brennpunkt.

Beispiel ansehen …

<radialGradient id="radial1">
	<stop offset="0%" stop-color="yellow" />
	<stop offset="100%" stop-color="blue" />
</radialGradient>
<radialGradient id="radial2" cx="0" cy="0" r="0.3">
	<stop offset="0%" stop-color="yellow" />
	<stop offset="100%" stop-color="blue" />
</radialGradient>
<radialGradient id="radial3" cx="0" cy="0" r="1">
	<stop offset="0%" stop-color="yellow" />
	<stop offset="100%" stop-color="blue" />
</radialGradient>
<radialGradient id="radial4" cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
	<stop offset="0%" stop-color="yellow" />
	<stop offset="100%" stop-color="blue" />
</radialGradient>
<radialGradient id="radial5" cx=".5" cy=".5" r=".5" fx="1" fy=".5">
	<stop offset="0%" stop-color="yellow" />
	<stop offset="100%" stop-color="blue" />
</radialGradient>
<radialGradient id="radial6" cx=".5" cy=".5" r=".5" fx=".5" fy="1">
	<stop offset="0%" stop-color="yellow" />
	<stop offset="100%" stop-color="blue" />
</radialGradient>
<radialGradient id="radial7" cx=".2" cy=".2" r=".4" fx=".7" fy="0.6">
	<stop offset="0%" stop-color="yellow" />
	<stop offset="100%" stop-color="blue" /> </radialGradient>
<radialGradient id="radial8" cx=".7" cy=".7" r=".3" fx=".2" fy="0.2" fr="0.1">
	<stop offset="0%" stop-color="yellow" />
	<stop offset="100%" stop-color="blue" />
</radialGradient>

In der oberen Reihe sehen Sie einen radialen Verlauf ohne Angabe von cx, cy und r. Die Standardwerte positionieren den Verlauf in der Mitte und über 50‍ ‍% der Breite des Elements. Der Vektor des Farbverlaufs (roter Pfeil) geht von der Mitte nach außen.

In den nächsten Bildern wird der Verlauf mit cx="0" cy="0" oben links positioniert. Der Verlauf im mittleren Bild hat einen kleineren Radius (r="0.3"); rechts ist er mit (r="1") größer.

In der mittleren Reihe wurden auch die Werte für die fx- und fy-Attribute geändert. Damit wird der Brennpunkt der Velraufs verschoben.

Wenn der Startkreis (oder Startpunkt) vollständig im Inneren des Endkreises liegt, besteht der radiale Gradient aus ineinander liegenden Kreisen und das Grafikelement wird vollständig gefüllt. Das ändert sich, sobald der Startkreis auch nur um ein Weniges aus dem Endkreis hinausragt. SVG zeichnet auch jetzt Kreisringe, und verschiebt dabei den Mittelpunkt von (fx,fy) nach (cx,cy), aber die hohe Exzentrität des Mittelpunkts bewirkt, dass keine vollständige Füllung mehr entsteht, sondern ein Füllkegel. Die Beispielgradienten 7 und 8 zeigen dieses Verhalten.

Beachten Sie, dass cx, cy und r bei circle und ellipse Präsentationsattribute, bei radialGradient jedoch „nur“ XML-Attribute sind.

Wiederholung von radialen Verläufen

Welche Farbe im Inneren des Startkreises und außerhalb des Endkreises gewählt wird, hängt vom spreadMethod-Attribut ab, die Sie angeben. Dieses Attribut des radialGradient-Elements kann folgende Werte annehmen:

pad

Im Inneren des Startkreises ist die Farbe von Offset 0‍ ‍%, außerhalb des Endkreises ist die Farbe von Offset 100‍ ‍%

repeat

Im Inneren des Startkreises ist die Farbe von Offset 100‍ ‍%, außerhalb des Endkreises wird der Farbverlauf wiederholt, d. h. für Offset 100‍ ‍% bis 200‍ ‍% werden die Farben von Offset 0‍ ‍% bis 100‍ ‍% wiederholt, für Offset 200‍ ‍% bis 300‍ ‍% erneut, bis die Fläche gefüllt ist.

reflect

Im Inneren des Startkreises ist die Farbe von Offset 0‍ ‍%. Außerhalb des Endkreises wird der Farbverlauf gespiegelt dargestellt, d. h. für Offset 100‍ ‍% bis 200‍ ‍% werden die Farben von 100‍ ‍% bis 0‍ ‍% dargestellt, dann von 200‍ ‍% bis 300‍ ‍% wieder die Farben von 0‍ ‍% bis 100‍ ‍%, und so weiter.

Wiederholungen ansehen …

    <radialGradient id="radial1" cx="0.5" cy="0.5" r="0.3"
        fx="0.4" fy="0.4" spreadMethod="pad">
      <stop offset="0%" stop-color="yellow" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
    <radialGradient id="radial2" cx="0.5" cy="0.5" r="0.3"
        fx="0.4" fy="0.4" spreadMethod="reflect">
      <stop offset="0%" stop-color="yellow" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
    <radialGradient id="radial3" cx="0.5" cy="0.5" r="0.3"
        fx="0.4" fy="0.4" spreadMethod="repeat">
      <stop offset="0%" stop-color="yellow" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>

gradientTransform

Die optionale Angabe gradientTransform dient einer möglichen Transformation (Richtungsänderung) des Verlaufs.

Verläufe transformieren ansehen …

<radialGradient id="radial1" cx="100" cy="100" r="100" fx="100" fy="100" gradientUnits="userSpaceOnUse" >
    <stop offset="0%" stop-color="blue" />
    <stop offset="50%" stop-color="yellow" />
    <stop offset="100%" stop-color="blue" />
</radialGradient>
<radialGradient id="radial2" cx="100" cy="100" r="100" fx="100" fy="100" gradientUnits="userSpaceOnUse"  gradientTransform="skewX(30) translate(-60, 0)">
    <stop offset="0%" stop-color="blue" />
    <stop offset="50%" stop-color="yellow" />
    <stop offset="100%" stop-color="blue" />
</radialGradient>
<radialGradient id="radial3"  cx="100" cy="100" r="100" fx="100" fy="100" gradientUnits="userSpaceOnUse" gradientTransform="translate(50, 0) scale(0.5,1.5)">
    <stop offset="0%" stop-color="blue" />
    <stop offset="50%" stop-color="yellow" />
    <stop offset="100%" stop-color="blue" />
</radialGradient>

Folgende Funktionen sind möglich:

• translate(): Verschiebung
• rotate(): Drehung
• scale(): Streckung
• skew(): Neigen, Verzerren
• matrix(): Transformieren durch Angabe der Transformationsmatrix

Empfehlung: Passen Sie anstelle einer Transformation einfach den Farbverlaufsvektor an.

Siehe auch

• Texteffekte in SVG - Verläufe animieren
• SVG/Tutorials/Filter/Licht und Schatten

• CSS/Tutorials/Hintergrund - Farbverläufe in CSS
  • linear-gradient()
  • radial-gradient()
  • conic-gradient()

Referenz:

• SVG/Element/linearGradient
• SVG/Element/radialGradient
• SVG/Element/stop

• SVG/Attribut/gradientTransform
• SVG/Attribut/gradientUnits
• SVG/Attribut/cx
• SVG/Attribut/cy
• SVG/Attribut/fr
• SVG/Attribut/fx
• SVG/Attribut/fy
• SVG/Attribut/offset

• SVG/Attribut/r
• SVG/Attribut/spreadMethod
• SVG/Attribut/stop-color
• SVG/Attribut/stop-opacity
• SVG/Attribut/x1
• SVG/Attribut/x2
• SVG/Attribut/y1
• SVG/Attribut/y2

Quellen