32: SVG-filters op SVG- en HTML-elementen - CSS-trucs

Misschien heb je gehoord van CSS-filters? Je kunt ze toepassen op elk element van CSS, zoals:

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

U kunt dat zelfs toepassen op een HTML-element of een SVG-element.

Maar er zijn ook filters die u in SVG kunt definiëren, en er zijn meer opties als u dat doet. Hier is een voorbeelddefinitie:

U kunt het vervolgens toepassen op een element in de SVG, zoals:

Of vanuit de CSS door op dezelfde manier naar de ID te verwijzen:

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

Er zijn veel SVG-filters. Bekende zoals vervaging, en rare die schilderkunstige effecten toepassen. Hier is de specificatie.