<!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
=
"BackgroundImage"
id
=
"gfg"
/>
</
feMerge
>
</
filter
>
<
rect
x
=
"40"
y
=
"40"
width
=
"100"
height
=
"100"
style="stroke: #000000; fill: red;
filter: url(#feOffset);" />
<
rect
x
=
"40"
y
=
"40"
width
=
"100"
height
=
"100"
style
=
"stroke: #000000; fill: red;"
/>
<
script
type
=
"text/javascript"
>
let mergeNode = document.getElementById("gfg");
console.log(mergeNode.in1);
console.log("in1 value is : ",
mergeNode.in1.baseVal);
</
script
>
</
svg
>
</
body
>
</
html
>