SVG Renk Geçişleri - Doğrusal

SVG Gradyanları

Bir gradyan başka bir renge düzgün bir geçiştir. Ayrıca, çok sayıda renk geçişleri aynı elemanına uygulanabilir.

SVG -degradeler iki ana tipi vardır:

• Doğrusal
• Radyal

SVG Lineer Gradyan - <linearGradient>

<linearGradient> elemanı bir doğrusal eğimi tanımlamak için kullanılır.

<linearGradient> öğ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) .

Doğrusal gradyanlar, yatay, dikey veya açılı gradyanlar gibi tanımlanabilir:

• y1 ve y2 eşittir ve x1 ve x2 farklılık olduğunda Yatay geçişlerini oluşturulur
• x1 ve x2 eşittir ve y1 ve y2 farklılık olduğunda Dikey geçişlerini oluşturulur
• x1 ve x2 farklılık ve y1 ve y2 farklılık olduğunda Açısal geçişlerini oluşturulur

Örnek 1

sarıdan kırmızıya yatay doğrusal bir gradyanı ile bir elips tanımlayın:

İşte SVG kodu:

Code explanation:

• id öznitelik <linearGradient> etiketi gradyan için benzersiz bir ad tanımlar
• X1, x2, y1, Y2 özellikleri <linearGradient> etiket gradyanı başlangıç ve bitiş pozisyonunu tanımlayan
• 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

sarıdan kırmızıya dikey bir lineer gradyan ile bir elips tanımlayın:

İşte SVG kodu:

Örnek 3

sarıdan kırmızıya yatay doğrusal bir gradyanı ile bir elips tanımlar ve elipsin iç metin ekleyin:

İşte SVG kodu:

Code explanation:

• <text> öğesi bir metin eklemek için kullanılır