SVG Doğruşam Filtre

SVG düzgeçişleri, <defs> etiketi içinde tanımlanmalıdır.

SVG düzgeçiş

Düzgeçiş, bir renkten diğerine geçişte pürüzsüz bir geçiş sağlar. Ayrıca, aynı elemente birden fazla renk geçişi uygulamak da mümkündür.

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

  • Lineer düzgeçiş
  • Radyal düzgeçiş

Lineer düzgeçiş

<linearGradient> etiketi, SVG'nin lineer düzgeçişlerini tanımlamak için kullanılır.

<linearGradient> etiketi, <defs> içine gömülmelidir.<defs> etiketi, definitions'in kısaltmasıdır ve düzgeçişler gibi özel elementleri tanımlamak için kullanılır.

Düzgeçişler düz, dikey veya köşeli olarak tanımlanabilir:

  • y1 ve y2 eşit, x1 ve x2 farklı olduğunda, yatay düzgeçiş oluşturulabilir
  • x1 ve x2 eşit, y1 ve y2 farklı olduğunda, dikey düzgeçiş oluşturulabilir
  • x1 ve x2 farklı, y1 ve y2 farklı olduğunda, köşeli düzgeçiş oluşturulabilir

Aşağıdaki kodu not defterine kopyalayın, dosyayı "linear1.svg" olarak kaydedin. Bu dosyayı web dizininize ekleyin:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" 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="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

Kod açıklaması:

  • <linearGradient> etiketinin id özelliği, düzgeçişe benzersiz bir ad verir
  • fill:url(#orange_red) özelliği, ellipse elementini bu düzgeçişe bağlar
  • <linearGradient> etiketinin x1, x2, y1, y2 özellikleri, düzgeçişin başlangıcı ve bitişini tanımlar
  • Düzgeçiş renk aralığı iki veya daha fazla renkten oluşabilir. Her renk bir <stop> etiketi ile belirlenir. offset özelliği, düzgeçişin başlangıcı ve bitişini tanımlar.

Örnekleri görüntüle (düzgeçiş)

Bir diğer örnek:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" 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="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

Örnekleri Gör (Dikdörtgen Doğruşam Filtre)