HTML SVG Gradyanlar (Gradients) - Ders_1 Linear Gradyanlar

SVG Linear Gradyanlar (Gradients)

Bir gradyan, iki renk arasında yumuşak bir geçiş demektir. Bir çok renk arasında bir gradyan da oluşturulabilir.

SVG'de iki temel tipte gradyan vardır. Bunlar:

• Linear (Doğrusal)
• Radial (Dairesel)

SVG Linear Gradyanlar (Linear Gradient) - <linearGradient> Elemanı

<linearGradient> elemanı doğrusal bir gradyan oluşturmak için kullanılır. Bu eleman, <defs> elemanı içinde tanımlanmalıdır.

Doğrusal gradyanlar; yatay, dikey ve açısal olmak üzere üç çeşittir:

• Yatay gradyanda x1 ve x2 değerleri farklıdır, y1 ve y2 değerleri aynıdır.
• Dikey gradyanda x1 ve x2 değerleri aynıdır, y1 ve y2 değerleri farklıdır.
• Açısal gradyanda x1 ve x2 değerleri farklıdır, y1 ve y2 değerleri de farklıdır.

Aşağıda, doğrusal ve yatay bir gradyan efekti örneği verilmiştir:

Bu efekt şu kodlar ile verilmiştir:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

Bu kodların anlamı şudur:

• id="grad1" kodu ile <linearGradient> elemanına emsalsiz bir kimlik verdik ve bu kimlik sayesinde, bu gradyanı, <ellipse> elemanına uyguladık fill="url(#grad1)".
• linearGradient elemanındaki; x1, x2, y1 ve y2 özellikleri, gradyanın başlangıç ve bitiş pozisyonlarını ifade eder.
• Gradyandaki renk geçişleri, iki veya daha fazla renk kullanılarak yapılır. Her bir renk de <stop> elemanı ile tanımlanır. offset="değer" özelliği, gradyan renginin nerede başlayacağını ya da biteceğini belirler.
• fill="url(#grad1)" özelliği ile, elips elemanına hangi gradyanı uygulayacağımız belirledik. Gradyana bir link verdik.

Aşağıdaki örnekte, sarıdan kırmızıya doğru, dikey bir gradyan oluşturulmuştur:

Bu efekt şu kodlar ile verilmiştir:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

Başka bir örnek daha:

Bu efekt şu kodlar ile verilmiştir:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad3)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
  SVG</text>
</svg>

SVG elemanına bir teks eklemek için <text> elemanı kullanılır.

sonraki ders için tıklayınız