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

Der lineare Farbverlauf

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 Startpunkt
• y1: vertikaler Startpunkt
• x2: horizontaler Endpunkt
• y2: vertikaler Endpunkt

Beispiel ansehen …

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

ansehen …

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

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.

gradientTransform

Die optionale Angabe …

• gradientTransform: dient einer möglichen Transformation (Richtungsänderung) des Verlaufs

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.

Farben, Positionen und Transparenz eines Farbverlaufs

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

Beispiel

<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 Farbe
• stop-opacity: regelt die Transparenz der Farbe (erlaubte Werte siehe offset)

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 für alle Attribute cx, cy, fx, fy und r ist 0.5 bzw. 50%)
• cy: vertikaler Mittelpunkt
• fx: horizontaler Brennpunkt (verschiebt die Stelle mit der höchsten Farbintensität vom Mittelpunkt an einen anderen Punkt)
• fy: vertikaler Brennpunkt
• r: Radius

Beispiel ansehen …

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

In der oberen Reihe haben die Verläufe einen jeweils anderen Startpunkt und Radius.
In der unteren Reihe wurden auch die Werte für die fx- und fy-Attribute geändert.

Beachten Sie, Sie, dass die Beispiele 7 und 8 in Chrome und Opera nur einen Teil der Fläche des rect-Elements füllen.

ansehen …

gradientTransform besitzt dieselbe Bedeutung wie bei den linearen Farbverläufen.

Beachten Sie, dass im Gegensatz zu linearen Farbübergängen bei radialen Übergängen die Farben von innen nach außen verlaufen.

Wiederholung von Farbverläufen

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 Spiegelung
• repeat: Wiederholung

Beispiel ansehen …

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

ansehen …

Anwendungsbeispiele

• Texteffekte - Verläufe animieren

Strahlen nach außen hin transparent werden lassen

• http://forum.de.selfhtml.org/archiv/2013/9/t215134/#m1472803

Siehe auch

• SVG/Elemente/linearGradient
• SVG/Elemente/radialGradient
• SVG/Elemente/stop
• SVG/Attribute/gradientTransform