SVG Radiation Verloop

SVG-verlopen moeten binnen de <defs>-tag worden gedefinieerd.

Radiële verloop

De <radialGradient>-tag wordt gebruikt om een radiële verloop te definiëren.

De <radialGradient>-tag moet ingesloten zijn in de <defs>-tag. De <defs>-tag is een afkorting voor definitions en maakt het mogelijk om speciale elementen zoals verlopen te definiëren.

Kopieer de onderstaande code naar een notitiesprogramma en sla het bestand op als "radial1.svg". Plaats dit bestand in uw webdirectory:

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

De id-eigenschap van de <radialGradient>-tag kan een unieke naam definiëren voor het verloop, fill:url(#grey_blue) koppelt het ellipse-element aan dit verloop, cx, cy en r definiëren de buitenste cirkel, terwijl fx en fy de binnenste cirkel definiëren De kleurenwaaier van de verloop kan bestaan uit twee of meer kleuren. Elke kleur wordt gedefinieerd door een <stop>-tag. De offset-eigenschap wordt gebruikt om de begin- en eindpositie van het verloop te definiëren.

Bekijk Voorbeeld

Een ander voorbeeld:

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

Bekijk Voorbeeld