32: Filtry SVG w elementach SVG i HTML - CSS-Tricks

Anonim

Być może słyszałeś o filtrach CSS? Możesz je zastosować do dowolnego elementu z CSS, takiego jak:

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

Możesz nawet zastosować to do elementu HTML lub elementu SVG.

Ale są też filtry, które możesz zdefiniować w SVG, a kiedy to zrobisz, masz więcej opcji. Oto przykładowa definicja:

 

Następnie możesz zastosować go do elementu bezpośrednio w SVG, na przykład:

 

Lub z CSS, odwołując się do identyfikatora w podobny sposób:

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

Istnieje wiele filtrów SVG. Znajome, takie jak rozmycie, i dziwne, które nakładają efekty malarskie. Oto specyfikacja.