SVG Gradyanları - Doğrusal

SVG Gradyanları

Degrade, bir renkten diğerine yumuşak bir geçiştir. Ayrıca aynı elemana birkaç renk geçişi uygulanabilir.

SVG'de iki ana gradyan türü vardır:

• Doğrusal
• Radyal

SVG Doğrusal Gradyan - <linearGradient>

<linearGradient> öğesi, doğrusal bir gradyan tanımlamak için kullanılır.

<linearGradient> öğesi, bir <defs> etiketi içinde yuvalanmalıdır. <defs> etiketi, tanımların kısaltmasıdır ve özel öğelerin (gradyanlar gibi) tanımını içerir.

Doğrusal gradyanlar, yatay, dikey veya açısal gradyanlar olarak tanımlanabilir:

• y1 ve y2 eşit olduğunda ve x1 ve x2 farklı olduğunda yatay gradyanlar oluşturulur
• x1 ve x2 eşit olduğunda ve y1 ve y2 farklı olduğunda dikey gradyanlar oluşturulur
• Açısal gradyanlar, x1 ve x2 farklı olduğunda ve y1 ve y2 farklı olduğunda oluşturulur

örnek 1

Sarıdan kırmızıya yatay doğrusal gradyanlı bir elips tanımlayın:

İşte SVG kodu:

Kod açıklaması:

• <linearGradient> etiketinin id özelliği, degrade için benzersiz bir ad tanımlar.
• <linearGradient> etiketinin x1, x2, y1,y2 öznitelikleri, degradenin başlangıç ​​ve bitiş konumunu tanımlar
• Bir gradyan için renk aralığı iki veya daha fazla renkten oluşabilir. Her renk bir <stop> etiketi ile belirtilir. Ofset özelliği, degrade rengin nerede başlayıp nerede bittiğini tanımlamak için kullanılır.
• fill niteliği, elips öğesini degradeye bağlar

Örnek 2

Sarıdan kırmızıya dikey doğrusal gradyanlı bir elips tanımlayın:

İşte SVG kodu:

Örnek 3

Sarıdan kırmızıya yatay doğrusal gradyanlı bir elips tanımlayın ve elipsin içine bir metin ekleyin:

İşte SVG kodu:

Kod açıklaması:

• <text> elemanı metin eklemek için kullanılır.