SVG radiær baggrund

SVG-gradationer skal defineres inden for <defs>-etiketten.

Radielle gradationer

<radialGradient> bruges til at definere radielle gradationer.

<radialGradient>-etiketten skal være indlejret i <defs>-etiketten.<defs>-etiketten er en forkortelse for definitions, og den tillader definition af specielle elementer som f.eks. gradationer.

Kopier nedenstående kode til en tekstfil, og gem filen som "radial1.svg". Placer denne fil i din webmappe:

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

Kodeforklaring:

<radialGradient>-etiketten kan bruge id-attributten til at definere en unik navn for gradationen, fill:url(#grey_blue)-attributten forbinder ellipse-elementet til denne gradation, cx, cy og r-attributterne definerer yderskallet, mens fx og fy definerer inderskallet Farveområdet for gradation kan bestå af to eller flere farver. Hver farve defineres ved en <stop>-etiket. offset-attributten bruges til at definere start- og slutpositionen for gradationen.

Se eksempel

En anden eksempel:

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

Se eksempel