32: SVG-Filter für SVG- und HTML-Elemente - CSS-Tricks

Anonim

Vielleicht haben Sie schon von CSS-Filtern gehört? Sie können sie auf jedes beliebige Element aus CSS anwenden, z.

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

Sie können dies sogar auf ein HTML-Element oder ein SVG-Element anwenden.

Es gibt aber auch Filter, die Sie in SVG definieren können, und es gibt mehr Optionen, wenn Sie dies tun. Hier ist eine Beispieldefinition:

 

Sie können es dann auf ein Element direkt in der SVG anwenden, wie:

 

Oder aus dem CSS durch ähnliches Verweisen auf die ID:

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

Es gibt viele SVG-Filter. Bekannte wie Unschärfe und seltsame, die malerische Effekte anwenden. Hier ist die Spezifikation.