SVG Lineer Geçişler

SVG Geçiş

Geçiş, bir renkten diğerine pürüzsüz geçiş demektir. Ayrıca, aynı elemente birden fazla renk geçişi uygulanabilir.

SVG'de iki ana geçiş türü vardır:

• Lineer Eğrisel Geçiş
• Radyal Geçiş

SVG Lineer Eğrisel Geçiş - <linearGradient>

<linearGradient> Elementler, lineer eğrisel geçişleri tanımlamak için kullanılır.

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

Lineer eğrisel geçişler düz, dikey veya açı eğrisel geçiş olarak tanımlanabilir:

• y1 ve y2 eşit ve x1 ve x2 farklıysa yatay eğrisel geçiş oluşturun
• x1 ve x2 eşit ve y1 ve y2 farklıysa dikey eğrisel geçiş oluşturun
• x1 ve x2 farklı ve y1 ve y2 eşit değilken açı eğrisel geçiş oluşturun

Örnek 1

Bir elips tanımlayın, yelkenten kırmızıya olan yatay lineer eğrisel geçiş:

Bu SVG kodu:

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

Kendi Kendine Deneyin

Kod Açıklaması:

• <linearGradient> etiketinin id özelliği, solğun benzersiz adını tanımlar
• <linearGradient> etiketinin x1, x2, y1, y2 özellikleri, solğun başlangıcı ve bitişini tanımlar
• Soluk renk aralığı, iki veya daha fazla renkten oluşabilir. Her renk, <stop> etiketi ile belirlenir
• offset özelliği, soluk renklerinin başlangıcı ve bitişini tanımlar
• fill özelliği, elips elementini solğa bağlar

Örnek 2

Bir elips tanımlar ve elips içine metin ekler, yuvarlaktan kırmızıya olan dikey lineer soluk geçişi:

Bu SVG kodu:

<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,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

Kendi Kendine Deneyin

Örnek 3

Bir elips tanımlar ve elips içine metin ekler, yuvarlakten kırmızıya olan yatay lineer soluk geçişi:

Bu SVG kodu:

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

Kendi Kendine Deneyin

Kod Açıklaması:

• <text> ögesi metin eklemek için kullanılır