May 2019
Beginner to intermediate
650 pages
14h 50m
English
SVG filters can be applied to any shapes, text or images. They are usually created in the <defs> header with an id that can be referenced via url(#id) using the filter attribute. The <filter> element can contain several different filter types and you can also create composite filters. The following example creates two different configurations for the <feGaussianBlur>filter, applied to a text element and a circle:
<svg width="600" height="300"> <defs> <filter id="filter1"> <feGaussianBlur stdDeviation="7" /> </filter> <filter id="filter2" x="-100" y="-100" height="200" width="200"> <feGaussianBlur stdDeviation="0,5" in="SourceGraphic" /> </filter> </defs> <text id="text" font-size="40" fill="black" x="50" y="60" filter="url(#filter2)">Do ...
Read now
Unlock full access