SVG-verlopen - radiaal
SVG radiaal verloop - <radialGradient>
Het element <radialGradient> wordt gebruikt om een radiale gradiënt te definiëren.
Het <radialGradient>-element moet worden genest in een <defs>-tag. De tag <defs> is een afkorting voor definities en bevat definitie van speciale elementen (zoals gradiënten).
voorbeeld 1
Definieer een ellips met een radiaal verloop van wit naar blauw:
Hier is de SVG-code:
Voorbeeld
<svg height="150" width="500">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);
stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55"
fill="url(#grad1)" />
</svg>
Code uitleg:
- Het id-attribuut van de tag <radialGradient> definieert een unieke naam voor het verloop
- De attributen cx, cy en r definiëren de buitenste cirkel en de fx en fy definiëren de binnenste cirkel
- Het kleurbereik voor een verloop kan uit twee of meer kleuren bestaan. Elke kleur wordt gespecificeerd met een <stop> tag. Het offset-attribuut wordt gebruikt om te definiëren waar de kleurovergang begint en eindigt
- Het vulkenmerk koppelt het ellipselement aan het verloop
Voorbeeld 2
Definieer nog een ellips met een radiaal verloop van wit naar blauw:
Hier is de SVG-code:
Voorbeeld
<svg height="150" width="500">
<defs>
<radialGradient id="grad2" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);
stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>