SVG-Linienverlauf

SVG Farbverläufe

Ein Farbverlauf ist eine glatte Übergangsverteilung von einer Farbe zur anderen. Außerdem können mehrere Farbverläufe auf einem Element angewendet werden.

In SVG gibt es zwei Haupttypen von Farbverläufen:

  • Lineare Farbverlauf
  • Strahlverlauf

SVG lineare Farbverläufe - <linearGradient>

<linearGradient> Das Element wird verwendet, um lineare Farbverläufe zu definieren.

<linearGradient> Das Element muss in <defs> Innerhalb der Markierung.<defs> Das Element "definitions" ist eine Abkürzung für die Definitionen spezieller Elemente (z.B. Filter)

Lineare Farbverläufe können horizontal, senkrecht oder in Winkel definiert werden:

  • Erstellt einen horizontalen Verlauf, wenn y1 und y2 gleich sind und x1 und x2 unterschiedlich sind
  • Erstellt einen senkrechten Verlauf, wenn x1 und x2 gleich sind und y1 und y2 ungleich sind
  • Erstellt einen Winkelverlauf, wenn x1 und x2 unterschiedlich sind und y1 und y2 ungleich sind

Beispiel 1

Definiert einen Ellipsen, der eine horizontale lineare Farbverlauf von Gelb nach Rot hat:

Dies ist der SVG-Code:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad1" 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="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

Probieren Sie es selbst aus

Code-Explainierung:

  • Das id-Attribut des <linearGradient>-Tags definiert den eindeutigen Namen des Farbverlaufs
  • Die x1, x2, y1, y2-Attribute des <linearGradient>-Tags definieren den Anfang und das Ende des Farbverlaufs
  • Der Farbverlauf kann aus zwei oder mehreren Farben bestehen. Jede Farbe wird durch das <stop>-Tag spezifiziert
  • Die offset-Eigenschaft wird verwendet, um den Anfang und das Ende der Farbverlauffarbe zu definieren
  • Die fill-Eigenschaft verknüpft das Ellipsen-Element mit dem Farbverlauf

Beispiel 2

Definiert einen Ellipsen mit einer vertikalen linearen Farbverlauf von Gelb nach Rot:

Dies ist der SVG-Code:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

Probieren Sie es selbst aus

Beispiel 3

Definiert einen Ellipsen und fügt Text innerhalb der Ellipse hinzu, der eine horizontale lineare Farbverlauf von Gelb nach Rot hat:

SVG

Dies ist der SVG-Code:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad3" 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="70" rx="85" ry="55" fill="url(#grad3)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
  SVG</text>
</svg>

Probieren Sie es selbst aus

Code-Explainierung:

  • Das <text>-Element wird verwendet, um Text hinzuzufügen