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