SVG-Farbverläufe -Radial

In SVG wird das<radialGradient>Das <radialGradient>-Element wird verwendet, um radiale Farbverläufe zu erstellen, die sich von einem Mittelpunkt nach außen ausbreiten können, um einen Farbverlaufseffekt zu erzeugen, wodurch Grafiken reichhaltige Farbvariationen wie kreisförmige und radiale Formen erhalten.

Radiale Farbverläufe können auf die Füllung oder Kontur von SVG-Grafikelementen angewendet werden, wodurch ihnen ein Gefühl von Tiefe und visuelle Effekte verliehen wird.

Grundlegende Syntax

<radialGradient id="gradient_id" cx="cx" cy="cy" r="r" fx="fx" fy="fy">
  <stop offset="offset1" stop-color="color1" />
  <stop offset="offset2" stop-color="color2" />
  <!-- 更多的 <stop> 元素 -->
</radialGradient>

Parameterbeschreibung:

  • idDas Attribut definiert eine eindeutige Kennung für den radialen Farbverlauf, die verwendet wird, um den Farbverlauf in SVG-Bildern zu referenzieren.

  • cxundcyDas Attribut definiert die Koordinate des Mittelpunkts des Farbverlaufs.

  • rDas Attribut definiert den Radius des Farbverlaufs.

  • fxundfyDas Attribut definiert die Koordinaten des Fokus des Farbverlaufs (optional), die verwendet werden, um Form und Richtung des Farbverlaufs zu steuern.

  • <stop>Das Element wird verwendet, um die Farben und Farbpositionen im Farbverlauf anzugeben.

Der folgende Code definiert einen radialen Farbverlauf von Rot nach Blau und wendet ihn dann auf einen gefüllten Kreis an, wodurch der Kreis einen Farbverlauf-Fülleffekt erhält.

Beispiel

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- Radialen Farbverlauf definieren -->
  <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
    <stop offset="0%" stop-color="red" />
    <stop offset="100%" stop-color="blue" />
  </radialGradient>
 
  <!-- Radialen Farbverlauf auf Kreis anwenden -->
  <circle cx="100" cy="100" r="80" fill="url(#gradient)" />
</svg>

Beispiel 1

Definiere einen radialen Farbverlauf von Weiß nach Blau für eine Ellipse:

Unten ist der SVG-Code:

Beispiel

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);
      stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

Selbst ausprobieren »

Zum Anzeigen klicken:。

Code-Erklärung:

  • Das id-Attribut des <radialGradient>-Tags kann einen eindeutigen Namen für den Farbverlauf definieren.
  • Die Attribute CX, CY und r definieren den äußersten Kreis, und Fx und Fy definieren den innersten Kreis.
  • Der Farbbereich des Verlaufs kann aus zwei oder mehr Farben bestehen. Jede Farbe wird mit einem <stop>-Tag angegeben. Das offset-Attribut wird verwendet, um Anfang und Ende der Verlaufsfarben zu definieren.
  • Das fill-Attribut verknüpft das ellipse-Element mit diesem Farbverlauf.

Beispiel 2

Definieren Sie eine weitere Ellipse mit einem radialen Farbverlauf von Weiß nach Blau:

Unten ist der SVG-Code:

Beispiel

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <radialGradient id="grad1" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);
      stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

Selbst ausprobieren »

Zum Anzeigen klicken:。

Hinweise

  • Ein Farbverlauf kann mehrere<stop>Elemente, die jeweils<stop>Element repräsentiert eine Farbe und eine Position im Farbverlauf.

  • cx、cyundrDas Attribut bestimmt den Mittelpunkt und den Radius des Farbverlaufs, währendfxundfydas Attribut wird verwendet, um den Fokus des Farbverlaufs zu steuern, wodurch die Form und Richtung des Farbverlaufs angepasst werden können.

  • Die Koordinatenwerte des Farbverlaufs können Prozentwerte oder Längenwerte verwenden; Prozentwerte sind relativ zum Grafikelement.

  • Radiale Farbverläufe können auf die Füllung oder Kontur von SVG-Elementen angewendet werden.

Indem Sie<radialGradient>Mit dem Element können Sie reichhaltige und farbenfrohe radiale Farbverlaufseffekte erzeugen, die SVG-Grafikelementen Tiefe und visuelle Attraktivität verleihen.

Andere Erweiterungen