SVG operator Attribute
Last Updated :
31 Mar, 2022
The operator attribute either defines the compositing operation or morphing operation to be performed. The elements that are using this attribute includes: <feComposite> and <feMorphology>.
Syntax:
operator = erode|dilate|over|arithmetic|out|atop|xor|lighter|in
Attribute Values: The operator attribute accepts the values mentioned above and described below
- over: It shows that the source graphic defined in the in attribute is placed over the destination graphic defined in the in2 attribute.
- in: It shows that the parts of the source graphic defined in the in attribute replace the destination graphic defined in the in2 attribute.
- out: It shows that the parts of the source graphic defined in the in attribute are displayed.
- atop: It shows that the parts of the source graphic which overlap the destination graphic, replace the destination graphic.
- xor: It shows that the non-overlapping regions of the source graphic defined in the in attribute are combined with the destination graphic defined in the in2 attribute.
- lighter: It shows that the sum of the source graphic and the destination graphic defined in the in and in2 attribute respectively, is displayed.
- arithmetic: It shows that the source graphic and the destination graphic defined in the in and in2 attribute respectively are combined using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4
- erode: It thins the source graphic defined in the in attribute.
- dilate: It fattens the source graphic defined in the in attribute.
Below examples illustrate the use of operator attribute.
Example 1:
HTML
<!DOCTYPE html>
< html >
< body >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< svg viewBox = "0 0 420 70"
< filter id = "thin" >
< feMorphology operator = "erode" radius = "0.4" />
</ filter >
< text x = "10" y = "20" fill = "green" filter = "url(#thin)" >
Thin text
</ text >
</ svg >
</ body >
</ html >
|
Output:
Example 2:
HTML
<!DOCTYPE html>
< html >
< body >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< svg viewBox = "0 0 420 70"
< filter id = "fat" >
< feMorphology operator = "dilate" radius = "0.8" />
</ filter >
< text x = "10" y = "20" fill = "green" filter = "url(#fat)" >
Fat text
</ text >
</ svg >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...