SVG radiell tonning
- Föregående sida SVG linjär tonning
- Nästa sida SVG exempel
SVG-gradenter måste definieras inom <defs>-taggen.
Radiell gradient
<radialGradient> används för att definiera radiell gradient.
<radialGradient>-taggen måste vara inbäddad i <defs>. <defs>-taggen är en förkortning för definitions, och den tillåter definiering av specialelement som gradienter.
Kopiera följande kod till en textfil och spara filen som "radial1.svg". Lägg denna fil i din webbdirectory:
<?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>
Kodförklaring:
<radialGradient>-taggets id-attribut kan användas för att ge gradienten ett unikt namn, fill:url(#grey_blue)-attributet länkar ellipse-elementet till denna gradient, cx, cy och r-attributen definierar yttre kretsen, medan fx och fy definierar inre kretsen Färggradientens räckvidd kan bestå av två eller flera färger. Varje färg definieras genom en <stop>-tagg. offset-attributet används för att definiera början och slutet av gradienten.En annan exempel:
<?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>
- Föregående sida SVG linjär tonning
- Nästa sida SVG exempel