32: Φίλτρα SVG σε στοιχεία SVG και HTML - CSS-Κόλπα

Ίσως έχετε ακούσει για φίλτρα CSS; Μπορείτε να τα εφαρμόσετε κάνοντας οποιοδήποτε στοιχείο από το CSS, όπως:

.apply-css-filter ( -webkit-filter: grayscale(0.5); filter: grayscale(0.5); )

Μπορείτε ακόμη να το εφαρμόσετε σε ένα στοιχείο HTML ή ένα στοιχείο SVG.

Υπάρχουν όμως και φίλτρα που μπορείτε να ορίσετε μέσα στο SVG και υπάρχουν περισσότερες επιλογές όταν το κάνετε. Ακολουθεί ένα παράδειγμα ορισμού:

Στη συνέχεια, μπορείτε να το εφαρμόσετε σε ένα στοιχείο ακριβώς στο SVG όπως:

Εναλλακτικά, από το CSS παραπέμποντας το αναγνωριστικό παρόμοιο:

.apply-svg-filter ( -webkit-filter: url(#pictureFilter); filter: url(#pictureFilter); )

Υπάρχουν πολλά φίλτρα SVG. Γνωστοί όπως θαμπάδα και περίεργοι που εφαρμόζουν ζωγραφικά εφέ. Εδώ είναι η προδιαγραφή.