SVG Radial Gradient - <radialGradient>
<radialGradient> element jest używany do definiowania gradientu radialnego.
<radialGradient> element musi być zagnieżdżone w <defs> tag. <defs> tag to skrót definicji i zawiera definicję elementów specjalnych (such as gradients) .
Przykład 1
Definiowanie elipsę z gradientu radialnego z białego na niebieski:
Oto kod SVG:
Przykład
<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>
Spróbuj sam " Code explanation:
- id atrybut <radialGradient> tag definiuje unikalną nazwę gradientu
- CX, CY i atrybuty R określają krąg peryferyjnych oraz fx i fy określić najgłębszą krąg
- Gama kolorów dla gradient może składać się z dwóch lub więcej kolorów. Każdy kolor jest określony za pomocą <stop> tag. offset atrybut jest używany do określenia, gdzie kolor gradientu początek i koniec
- fill atrybut łączy element elipsy do gradientu
Przykład 2
Określ inną elipsę z gradientu radialnego z białego na niebieski:
Oto kod SVG:
Przykład
<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>
Spróbuj sam "