SVG Radyal Gradient - <radialGradient>
<radialGradient> elemanı radyal gradyan tanımlamak için kullanılır.
<radialGradient> öğesi bir iç içe olmalıdır <defs> etiketi. <defs> etiketi tanımları kısaltmasıdır ve özel eleman tanımını içerir (such as gradients) .
Örnek 1
beyaz maviye radyal gradyan ile bir elips tanımlayın:
İşte SVG kodu:
Örnek
<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>
Kendin dene " Code explanation:
- id öznitelik <radialGradient> etiketi gradyan için benzersiz bir ad tanımlar
- cx, Cy ve r özellikler dış çemberi tanımlamak ve fx ve fy iç çemberi tanımlamak
- gradyanı renk içinde iki ya da daha fazla renk meydana gelebilir. Her renk bir ile belirtilir <stop> etiketinin. offset degrade renk başlangıç ve bitiş burada özelliği tanımlamak için kullanılır
- fill özelliği gradyanına elips bir element bağlayan
Örnek 2
beyaz maviye radyal gradyan ile bir elips tanımlayın:
İşte SVG kodu:
Örnek
<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>
Kendin dene "