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" >
< 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" >
< feGaussianBlur stdDeviation = "5" />
</ filter >
< rect x = "80" y = "30" width = "200"
height = "200" filter = "url(#blur)"
fill = "green" />
</ svg >
</ body >
</ html >
|
Output:
Last Updated :
31 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...