SVG Gaussian Bulanıklık

SVG filtresi, <defs> etiketi içinde tanımlanmalıdır.

Gaussian Bulanıklık (Gaussian Blur)

<filter> etiketi, grafiklere hangi filtreyi uygulamayı tanımlar? Zorunlu id özelliği

<filter> etiketi, <defs> etiketi içinde yerleştirilmelidir.<defs> etiketi, definitions kısaltmasıdır ve filtreler gibi özel elementlerin tanımlanmasına izin verir

Aşağıdaki kodu not defterine kopyalayın, dosyayı "filter1.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>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

Kod açıklaması:

  • <filter> etiketinin id özelliği, filtre için benzersiz bir ad tanımlar (aynı filtre, belgedeki birçok element tarafından kullanılabilir)
  • filter:url özelliği, elementi filtreye bağlamak için kullanılır. Filtre id'si bağlanırken # karakteri kullanılmalıdır
  • Filtre etkileri, <feGaussianBlur> etiketi ile tanımlanır. Filtreler için fe öneki tüm filtreler için kullanılabilir
  • <feGaussianBlur> etiketinin stdDeviation özelliği, bulanıklık derecesini tanımlar
  • in="SourceGraphic" bu kısmı, tüm resmin etkisini oluşturduğunu tanımlar

Örnekleri Gör

Bir diğer stdDeviation değeri farklı ö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>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

Örnekleri Gör