The filter attribute is used to specify the filter effects that are defined by the <filter> element which are to be applied to its elements.
Syntax:
filter="value"
Attribute values:
- value: The filter values to be applied to the element
We will use the filter attribute for setting the filter of the elements.
Example 1:
HTML
<!DOCTYPE html> <html>
<body>
<svg viewBox="0 0 800 800" <filter id="fil">
<!--Using GaussianBlur filter effect-->
<feGaussianBlur stdDeviation="5" />
</filter>
<rect x="80" y="30" width="200" height="200" filter="url(#fil)" />
</svg>
</body>
</html>
|
Output:
Example 2:
HTML
<!DOCTYPE html> <html>
<body>
<svg viewBox="0 0 800 800" <filter id="blur">
<!--> Using GaussianBlur filter effect<--->
<feGaussianBlur stdDeviation="5" />
</filter>
<rect x="80" y="30" width="200" height="200" filter="url(#blur)" fill="green" />
</svg>
</body>
</html>
|
Output: