Belki de CSS filtrelerini duymuşsunuzdur? Bunları CSS'deki herhangi bir öğeye uygulayabilirsiniz, örneğin:
.apply-css-filter ( -webkit-filter: grayscale(0.5); filter: grayscale(0.5); )
Bunu bir HTML öğesine veya bir SVG öğesine bile uygulayabilirsiniz.
Ancak SVG içinde tanımlayabileceğiniz filtreler de var ve bunu yaptığınızda daha fazla seçenek var. İşte örnek bir tanım:
Daha sonra bunu SVG'deki gibi bir öğeye uygulayabilirsiniz:
Veya kimliği benzer şekilde referans alarak CSS'den:
.apply-svg-filter ( -webkit-filter: url(#pictureFilter); filter: url(#pictureFilter); )
Çok sayıda SVG filtresi var. Bulanıklık gibi tanıdık olanlar ve resimsel efektler uygulayan garip olanlar. İşte teknik özellikler.