32: SVG ve HTML Öğelerinde SVG Filtreleri - CSS Hileleri

Anonim

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.