SVG Radial Gradient - <radialGradient>
<radialGradient> Elementul este folosit pentru a defini un gradient radial.
<radialGradient> elementul trebuie imbricate într - un <defs> tag. <defs> tag - ul este prescurtarea de la definițiile și definirea unor elemente speciale (such as gradients) .
Exemplul 1
Definiți o elipsă cu un gradient radial de la alb la albastru:
Aici este codul SVG:
Exemplu
<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>
Încearcă - l singur » Code explanation:
- id atribut al <radialGradient> tag - ul definește un nume unic pentru gradientul
- Cx, cy și atributele r definesc cercul exterior și fx și fy definesc cercul cel mai intim
- Gama de culori pentru un gradient poate fi compus din două sau mai multe culori. Fiecare culoare este specificat cu un <stop> tag - ul. De offset atribut este folosit pentru a defini în cazul în care începe culoarea gradientului și sfârșitul
- fill atribut leagă elementul de elipsă cu gradientul
Exemplul 2
Definiți un alt elipsă cu un gradient radial de la alb la albastru:
Aici este codul SVG:
Exemplu
<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>
Încearcă - l singur »