SVG radialGradient – Kreisverlauf

Mar 2026

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="ivory" />
			<stop offset="100%" stop-color="darkseagreen" />
		</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. »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. Allerdings funktionieren spreadMethod:reflect und spreadMethod:repeat in Safari nicht.

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).

Konischer Verlauf

Was SVG nicht bietet, ist ein konischer Kreisverlauf – also ein Farbrad. Für einen konische Verlauf in SVG kommt ein Foreign Object mit einem komischen CSS-Verlauf.

<svg viewBox="0 0 200 200" width="100%" height="100%">
<defs>
	<!-- Kreis als Maske -->
	<clipPath id="circleClip">
		<circle cx="100" cy="100" r="100" />
	</clipPath>
</defs>

<foreignObject width="200" height="200" clip-path="url(#circleClip)">
	<div xmlns="http://www.w3.org/1999/xhtml"
		style="width: 100%;height: 100%;background: conic-gradient(red,yellow,lime,cyan,blue,magenta,red);">
	</div>
</foreignObject>
</svg>