SVG-Linear-Verlaufen

SVG-Verläufe müssen im <defs>-Tag definiert werden.

SVG-Verlauf

Ein Verlauf ist eine weiche Übergang von einer Farbe zur anderen. Außerdem kann auf einem Element auch der Übergang mehrerer Farben angewendet werden.

In SVG gibt es zwei Haupttypen von Verläufen:

  • Linearer Farbverlauf
  • Radioverlauf

Linearer Farbverlauf

Das <linearGradient>-Tag wird verwendet, um lineare Verläufe in SVG zu definieren.

Das <linearGradient>-Tag muss im Inneren von <defs> eingebettet sein. <defs> ist eine Abkürzung für definitions und kann spezielle Elemente wie Verläufe definieren.

Ein linearer Farbverlauf kann horizontal, vertikal oder eckig definiert werden:

  • Wenn y1 und y2 gleich sind und x1 und x2 unterschiedlich sind, kann ein horizontaler Farbverlauf erstellt werden
  • Wenn x1 und x2 gleich sind und y1 und y2 unterschiedlich sind, kann ein vertikaler Farbverlauf erstellt werden
  • Wenn x1 und x2 unterschiedlich sind und y1 und y2 unterschiedlich sind, kann ein eckiger Farbverlauf erstellt werden

Kopieren Sie den folgenden Code in ein Textverarbeitungsprogramm und speichern Sie die Datei als "linear1.svg". Legen Sie diese Datei in Ihren Web-Ordner ab:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

Codeerklärung:

  • Das id-Attribut des <linearGradient>-Tags kann einem Verlauf einen eindeutigen Namen zuweisen
  • Die Eigenschaft fill:url(#orange_red) verknüpft das ellipse-Element mit diesem Verlauf
  • Die Attribute x1, x2, y1, y2 des <linearGradient>-Tags können den Anfang und das Ende des Verlaufs definieren
  • Der Farbverlauf kann aus zwei oder mehreren Farben bestehen. Jede Farbe wird durch einen <stop>-Tag definiert. Das offset-Attribut wird verwendet, um den Anfang und das Ende des Verlaufs zu definieren.

Beispiel anzeigen (horizontale Verlaufsform)

Ein weiteres Beispiel:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

Beispiel anzeigen (vertikales Verlaufen)