SVG-Radial-Verlaufs

SVG-Farbverläufe müssen im <defs>-Tag definiert werden.

Radiärer Farbverlauf

Das <radialGradient>-Tag wird verwendet, um radiäre Farbverläufe zu definieren.

Das <radialGradient>-Tag muss in einem <defs>-Tag eingebettet sein. Das <defs>-Tag ist eine Abkürzung für definitions und ermöglicht die Definition spezieller Elemente wie Farbverläufen.

Kopieren Sie den folgenden Code in ein Textverarbeitungsprogramm und speichern Sie die Datei als "radial1.svg". Legen Sie diese Datei in Ihren Web-Ordner ab:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>

Code-Explainierung:

Das id-Attribut des <radialGradient>-Tags kann einem Farbverlauf einen eindeutigen Namen zuweisen, fill:url(#grey_blue) verknüpft das ellipse-Element mit diesem Farbverlauf, die cx, cy und r-Attribute definieren den äußeren Kreis, während fx und fy den inneren Kreis definieren Der Farbverlauf kann aus zwei oder mehreren Farben bestehen. Jede Farbe wird durch einen <stop>-Tag definiert. Die offset-Eigenschaft wird verwendet, um den Anfang und das Ende des Farbverlaufs zu definieren.

Beispiel anzeigen

Ein weiteres Beispiel:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grey_blue" cx="20%" cy="40%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>

Beispiel anzeigen