SVG radialGradient – Kreisverlauf

SVG radial Gradient: Kreisverlauf (Kreis Verlauf oder kreisförmiger) oder konischer Verlauf

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.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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.

cx
cy
r
<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.

SVG konischer Verlauf

Gefunden auf openclipart.org

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