SVG Dairesel Geçiş

SVG Radyal Gradyan - <radialGradient>

<radialGradient> Element, radyal gradyan (ışın gradyanı) tanımlamak için kullanılır.

<radialGradient> Element, <defs> içinde.<defs> Element, tanımların (definitions) kısaltmasıdır ve özel elementlerin (örneğin, filtreler) tanımlarını içerir.

Örnek 1

Beyazdan maviye doğru radyal gradyan sahip bir elips tanımlayın:

Bu SVG kodu:

<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>

Kişisel olarak deneyin

Kod açıklaması:

• <radialGradient> etiketinin id özelliği, gradyanın benzersiz adını tanımlar
• cx, cy ve r özellikleri en dıştaki düzenleyiciyi, fx ve fy en içtaki düzenleyiciyi tanımlar
• Gradyan renk aralığı iki veya daha fazla renkten oluşabilir. Her renk <stop> etiketi ile belirlenir
• offset özelliği, gradyan renginin başlangıç ve bitiş konumunu tanımlar
• fill özelliği elips elementini gradyanla bağlar

Örnek 2

Beyazdan maviye doğru radyal gradyan sahip bir başka elips tanımlayın:

Bu SVG kodu:

<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>

Kişisel olarak deneyin