The <feMerge> SVG element allows filter effects to be applied concurrently instead of sequentially. The canonical implementation of <feMerge> is to render the entire effect into one RGBA layer, and then render the resulting layer on the output device.
Syntax:
<feMerge> ---- </feMerge>
Attributes : It does not contain any attribute.
Example 1:
HTML
<!DOCTYPE html>
< html >
< body >
< svg width = "200" height = "200" >
< filter id = "feOffset" x = "-40" y = "-20"
width = "100" height = "200" >
< feOffset in = "SourceGraphic" dx = "60" dy = "60" />
< feGaussianBlur stdDeviation = "5" result = "blur2" />
< feMerge >
< feMergeNode in = "offsetBlur" />
< feMergeNode in = "litPaint" />
</ feMerge >
</ filter >
< rect x = "1" y = "1" width = "198" height = "118"
fill = "green" stroke = "blue" />
< circle cx = "100" cy = "60" r = "55" stroke = "black"
stroke-width = "3" fill = "white" />
< g fill = "#FFFFFF" stroke = "Green" font-size = "10"
font-family = "Verdana" >
< text x = "60" y = "62" >GeeksForGeeks</ text >
</ svg >
</ body >
</ html >
|
Output:
Example 2:
HTML
<!DOCTYPE html>
< html >
< body >
< svg width = "200" height = "200" >
< filter id = "feOffset" x = "-40" y = "-20"
width = "100" height = "200" >
< feOffset in = "blur" dx = "4" dy = "4"
result = "offsetBlur" />
< feGaussianBlur in = "SourceGraphic"
stdDeviation = "5" result = "blur2" />
< feMerge >
< feMergeNode in = "offsetBlur" />
< feMergeNode in = "litPaint" />
</ feMerge >
</ filter >
< rect x = "40" y = "40" width = "100" height = "100"
style="stroke: #000000; fill: lightgreen;
filter: url(#feOffset);" />
< rect x = "40" y = "40" width = "100" height = "100"
style = "stroke: #000000; fill: green;" />
< g fill = "#FFFFFF" stroke = "black" font-size = "10"
font-family = "Verdana" >
< text x = "50" y = "90" >GeeksForGeeks</ text >
</ svg >
</ body >
</ html >
|
Output:
Last Updated :
31 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...