SVG Radialer Farbverlauf (radialGradient) - HTML lernen

Beschreibung des `<radialGradient>`-Elements

Ein radialer Farbverlauf geht von einem zentralen Punkt in einem kreisförmigen Muster nach außen über – ähnlich wie Wellen, die sich ausbreiten, wenn ein Stein ins Wasser fällt. Das <radialGradient>-Element definiert einen solchen Verlauf, der auf die Füll- und Stricheigenschaften grafischer Elemente angewendet werden kann.

Diese Seite erklärt, was einen radialen Farbverlauf von einem linearen unterscheidet, wie Farbstopps definiert werden und wie die Attribute gradientUnits und spreadMethod das Ergebnis steuern. Falls Sie neu bei SVG sind, beginnen Sie zunächst mit der SVG-Einführung.

Das <radialGradient>-Element muss innerhalb eines <defs>-Elements verschachtelt sein, das für Definitionen steht. Das <defs>-Element enthält wiederverwendbare Definitionen (wie Farbverläufe), die nicht eigenständig gezeichnet werden – sie werden von anderen Elementen referenziert. Sie wenden den Farbverlauf an, indem Sie dem <radialGradient> eine id geben und ihn dann mit fill="url(#id)" (oder stroke="url(#id)") referenzieren.

Wie ein radialer Farbverlauf definiert wird

Dies ist das Merkmal, das radiale von linearen Farbverläufen unterscheidet. Ein radialer Farbverlauf wird durch zwei Kreise definiert:

Ein Endkreis, festgelegt durch cx, cy (sein Mittelpunkt) und r (sein Radius). Der Farbverlauf endet – erreicht seinen letzten Farbstopp – am Rand dieses Kreises.
Ein Fokuspunkt, festgelegt durch fx, fy. Hier beginnt der Farbverlauf (sein erster Farbstopp). Der Verlauf strahlt vom Fokuspunkt nach außen, bis er den Endkreis erreicht.

Wenn fx/fy mit cx/cy übereinstimmen, ist der Farbverlauf perfekt konzentrisch. Wenn Sie den Fokuspunkt vom Mittelpunkt wegbewegen, wirkt der Verlauf außermittig – nützlich, um eine Lichtquelle oder einen 3D-Kugelglanz zu simulieren. Wenn Sie fx/fy weglassen, übernehmen sie standardmäßig die Werte von cx/cy.

Farbstopps

Die Farben eines Farbverlaufs werden durch ein oder mehrere <stop>-Elemente innerhalb des <radialGradient> beschrieben. Jeder Stopp hat folgende Attribute:

offset — die Position des Stopps entlang des Farbverlaufs, von 0% (dem Fokuspunkt) bis 100% (dem Rand des Endkreises). Sie können auch eine Zahl von 0 bis 1 verwenden.
stop-color — die Farbe an diesem Offset (beliebiger CSS-Farbwert).
stop-opacity — die Deckkraft an diesem Offset, von 0 (transparent) bis 1 (opak).

Gefahr

Verwechseln Sie einen SVG-radialen Farbverlauf nicht mit der CSS radial-gradient-Funktion. CSS-Farbverläufe können auf den Hintergrund beliebiger Elemente angewendet werden, während SVG-Farbverläufe nur für SVG-Elemente gelten.

Beispiel des SVG-`<radialGradient>`-Elements:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="300">
      <defs>
        <radialGradient id="example" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
          <!-- Center: transparent -->
          <stop offset="0%" stop-color="rgb(245,245,245)" stop-opacity="0" />
          <!-- Edge: solid light green -->
          <stop offset="100%" stop-color="rgb(144, 238, 144)" stop-opacity="1" />
        </radialGradient>
      </defs>
      <ellipse cx="250" cy="100" rx="95" ry="65" fill="url(#example)" /> Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Probier es selbst »

Beispiel mit außermittigem Fokuspunkt

Wenn Sie fx/fy von cx/cy entfernen, verschiebt sich der Startpunkt des Farbverlaufs. Hier wird der Fokuspunkt in die obere linke Hälfte des Kreises verschoben, was die Form wie eine beleuchtete Kugel aussehen lässt – der Glanzpunkt liegt nahe dem Fokuspunkt und die Farbe wird zum Endkreis hin tiefer:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="300">
      <defs>
        <!-- End circle centered at 50%/50%; focal point shifted to 35%/35% -->
        <radialGradient id="sphere" cx="50%" cy="50%" r="50%" fx="35%" fy="35%">
          <stop offset="0%" stop-color="rgb(255, 255, 255)" />
          <stop offset="100%" stop-color="rgb(30, 80, 200)" />
        </radialGradient>
      </defs>
      <circle cx="200" cy="150" r="120" fill="url(#sphere)" />
    </svg>
  </body>
</html>

Einheiten steuern mit `gradientUnits`

Das Attribut gradientUnits legt fest, in welchem Koordinatensystem cx, cy, r, fx und fy gemessen werden:

objectBoundingBox (der Standard) — Koordinaten sind relativ zum Begrenzungsrahmen des gefüllten Elements. Verwenden Sie Prozentangaben oder Brüche (0 bis 1), wobei 50% die Mitte der Form bedeutet. Der Farbverlauf skaliert automatisch mit der Form.
userSpaceOnUse — Koordinaten verwenden das eigene Benutzerkoordinatensystem des SVG-Canvas (dieselben Einheiten wie die Formen). Verwenden Sie absolute Werte wie cx="200". Dies ist praktisch, wenn ein Farbverlauf von mehreren Formen an einer festen Position geteilt wird.

<svg width="400" height="300">
  <defs>
    <radialGradient id="abs" gradientUnits="userSpaceOnUse"
                    cx="200" cy="150" r="120" fx="200" fy="150">
      <stop offset="0%" stop-color="orange" />
      <stop offset="100%" stop-color="purple" />
    </radialGradient>
  </defs>
  <rect x="80" y="30" width="240" height="240" fill="url(#abs)" />
</svg>

Ränder steuern mit `spreadMethod`

spreadMethod legt fest, was jenseits des Endkreises geschieht, wenn der Farbverlauf nicht die gesamte Form abdeckt (zum Beispiel wenn r kleiner als die Form ist oder der Fokuspunkt versetzt ist):

pad (der Standard) — der letzte Farbstopp wird als Vollton bis zu den Rändern fortgesetzt.
reflect — der Farbverlauf wird gespiegelt und wiederholt sich nach außen als ...Rand → Mitte → Rand → Mitte...
repeat — der Farbverlauf beginnt jedes Mal von vorne und wiederholt sich nach außen als ...Mitte → Rand, Mitte → Rand...

<svg width="400" height="150">
  <defs>
    <radialGradient id="rings" cx="50%" cy="50%" r="20%" spreadMethod="repeat">
      <stop offset="0%" stop-color="white" />
      <stop offset="100%" stop-color="teal" />
    </radialGradient>
  </defs>
  <rect x="0" y="0" width="400" height="150" fill="url(#rings)" />
</svg>

Attribute

Attribut	Beschreibung
cx	Gibt die x-Koordinate des Endkreises für den Farbverlauf an.
cy	Gibt die y-Koordinate des Endkreises für den Farbverlauf an.
r	Gibt den Radius des Endkreises für den Farbverlauf an.
fx	Gibt die x-Koordinate des Startkreises für den Farbverlauf an.
fy	Gibt die y-Koordinate des Startkreises für den Farbverlauf an.
gradientUnits	Gibt das Koordinatensystem für `cx`, `cy`, `r`, `fx` und `fy` an. Werte: `objectBoundingBox` (Standard) oder `userSpaceOnUse`.
gradientTransform	Gibt eine zusätzliche Transformation für das Koordinatensystem des Farbverlaufs an.
href	Eine URL-Referenz auf ein anderes „radialGradient"- oder „linearGradient"-Element.
spreadMethod	Gibt an, wie sich der Farbverlauf verhält, wenn er innerhalb der Grenzen der ihn enthaltenden Objekte beginnt oder endet. Werte: `pad`, `repeat` oder `reflect`.

Das SVG-<radialGradient>-Element unterstützt auch die Globalen Attribute und Ereignisattribute.

Übungen

Übung

Welche Attribute definieren den Fokuspunkt (Start) eines SVG-radialen Farbverlaufs?

fx, fycx, cyx1, y1dx, dy

Beschreibung des <radialGradient>-Elements

Wie ein radialer Farbverlauf definiert wird

Farbstopps

Beispiel des SVG-<radialGradient>-Elements: