SVG radialGradient – Kreisverlauf

Jul 2025

Ein radialer Gradient oder Kreisverlauf breitet sich von einem Punkt aus sowohl in x- als auch in y-Richtung anhand der Attribute cx, cy aus und erstreckt sich über einen Radius r.

Von innen nach außen

Genauso wie bei einem linearen Verlauf entstehen weiche Übergänge zwischen den Stops von einer Farbe zu einer nächsten. Kreisverläufe simulieren Tiefe, Highlights oder Spitzlichter und Reflexionen in Grafiken. Bei einem Element von gleicher Höhe und Breite entsteht ein kreisförmiger Verlauf, bei rechteckigen Elementen nimmt der Verlauf die Form einer Ellipse an. Wenn cx, cy und r nicht angegeben werden, geht der Kreisverlauf vom Zentrum des Objekts kreisförmig nach außen.

<svg width="200" height="200">
	<defs>
		<radialGradient id="sun" cx="50%" cy="50%" r="50%">
			<stop offset="0%" stop-color="yellow" />
			<stop offset="100%" stop-color="orange" />
		</radialGradient>
	</defs>
	<circle cx="100" cy="100" r="80" fill="url(#sun)" />
</svg>

Attribut	Bedeutung
cx, cy	Mittelpunkt des Gradienten
r	Radius (für Kreis)
fx, fy	Fokuspunkt (Start des Verlaufs)
spreadMethod	Verhalten über 100 % hinaus
gradientUnits	Koordinatenbezug (z. B. Objekt vs. Benutzerfläche)

<defs>
<radialGradient id="c1" cx="0.5" cy="0.5" r="0.5">
    <stop offset="0" stop-color="hsl(30,80%,90%)" />
    <stop offset=".5" stop-color="hsl(40,60%,60%)" />
    <stop offset="1" stop-color="hsl(30,50%,40%)" />
</radialGradient>
</defs>

<rect width="500" height="500" x="0" y="0" fill="url(#c1)" />

<rect width="300" height="100" x="0" y="0" fill="url(#c1)" />

Das Koordinatenpaar fx und fy verlagert den Brennpunkt innerhalb des radialen Verlaufs. Der radiale Verlauf füllt weiterhin die Breite und die Höhe des Objekts aus und bildet einen Kreis, aber der Brennpunkt verschiebt sich entsprechend den Koordinaten fx und fy.

<radialGradient id="c2" fx="0.2" fy="0.4">
</radialGradient>

objectBoundingBox und userSpaceOnUse

Die Strecke, über die sich der Verlauf erstreckt, ist entweder relativ zum gefüllten Element (objectBoundingBox, default) oder relativ zum Dokument gradientUnits="userSpaceOnUse".

gradientUnits="userSpaceOnUse" vs. "objectBoundingBox" – beeinflusst die Skalierung.

Wert	Bezugssystem	Bedeutung
userSpaceOnUse	globales SVG-Koordinatensystem	Die Gradient-Positionen (z. B. cx, r) werden in Pixeln oder Viewbox-Koordinaten angegeben, unabhängig von der Größe des Objekts, auf das sie angewendet werden.
objectBoundingBox (Standard)	relativ zur Größe des Objekts	Die Koordinaten cx, cy, r usw. sind prozentual relativ zum Objekt (z. B. cx="0.5" = 50 % der Objektbreite). Der Verlauf skaliert mit dem Objekt mit.

Wiederholung und Reflexion: spreadMethod

spreadMethod bestimmt, wie sich der Verlauf außerhalb des Radius r verhält. Wenn der Verlauf allerdings bis zum Rand des Objekts reicht (r="100%") wird kein Effekt sichtbar. In den meisten Situationen recht »pad« – die Voreinstellung.

In interaktiven Anwendungen (Diagramme, Simulationen) kann spreadMethod="reflect" oder repeat genutzt werden, um sich ausbreitende Wellen, Scans oder Lichtpuls-Effekte zu erzeugen.

<svg width="300" height="300" viewBox="0 0 300 300">
	<defs>
		<radialGradient id="repeatingGradient" cx="50%" cy="50%" r="10%" spreadMethod="repeat">
			<stop offset="0%" stop-color="red" />
			<stop offset="100%" stop-color="white" />
			<!-- Animation des Radius -->
			<animate id="ani" attributeName="r"
				values="5%;10%;5%" dur="2s"
				repeatCount="indefinite" />
		</radialGradient>
	</defs>
	
	<circle cx="50%" cy="50%" r="150" fill="url(#repeatingGradient)"/>
</svg>

Das funktioniert in Chrome, aber mit mit Safari, denn Safari unterstützt SVG-Animationen mit <animate> in <radialGradient> oder <linearGradient> nicht.</p>

Wert	Wirkung
pad (Standard)	Der äußere Farbwert bleibt erhalten und »füllt« den restlichen Bereich auf.
reflect	Der Verlauf spiegelt sich zyklisch immer wieder.
repeat	Der Verlauf wiederholt sich regelmäßig (nahtlos, nicht gespiegelt).

Radial Gradient zu Transparenz mit stop-opacity

Als Spotlight auf einer Kugel wirkt ein Kreisverlauf von Farbe zu Transparenz.

<radialGradient id="c1" cx="0.5" cy="0.5" r="0.5">
   <stop offset="0" stop-color="hsl(0,0%,100%)" stop-opacity="0.7"/>
   <stop offset="0.8" stop-color="hsl(0,0%,100%)" stop-opacity="0" />
</radialGradient>
<circle cx="100" cy="100" r="100" fill="hsl(10,80%,70%)" />
<circle cx="76" cy="84" r="70" fill="url(#c1)" />

Konischer Verlauf

Was SVG nicht bietet, ist ein konischer Kreisverlauf – also ein Farbrad. Das Farbrad mit dem konischen Verlauf im folgenden Beispiel ist eine Näherung an einen konischen Verlauf und besteht aus 360 Pfaden mit linearen Verläufen.

Gefunden auf openclipart.org

Die Alternative zur aufwändigen Näherung ist ein Polyfill für den konischen Verlauf.