SVG FEDisplacementMap.in2 Property
Last Updated :
30 Mar, 2022
The SVG FEDisplacementMap.in2 property returns the SVGAnimatedString object corresponding to the in2 component of the FEDisplacementMap element.
Syntax:
let in_prop = FEDisplacementMap.in2
Return value: This property returns the SVGAnimatedString object corresponding to the in2 component of the FEDisplacementMap element.
Example 1:
HTML
<!DOCTYPE html>
< html >
< body >
< svg width = "200" height = "200"
viewBox = "0 0 220 220" >
< filter id = "displacementFilter" >
< feTurbulence type = "turbulence"
baseFrequency = "5"
numOctaves = "2"
result = "turbulence" />
< feDisplacementMap in2 = "abc"
in = "SourceGraphic"
scale = "200" xChannelSelector = "B"
yChannelSelector = "R" id = "gfg" />
</ filter >
< rect width = "250" height = "250" style =
"filter: url(#displacementFilter)" />
< script type = "text/javascript" >
var g = document.getElementById("gfg");
console.log(g.in2)
console.log("in2 value is : ",
g.in2.baseVal)
</ script >
</ svg >
</ body >
</ html >
|
Output:
Example 2:
HTML
<!DOCTYPE html>
< html >
< body >
< svg width = "200" height = "200"
viewBox = "0 0 220 220" >
< filter id = "displacementFilter" >
< feTurbulence type = "turbulence"
baseFrequency = "1"
numOctaves = "2"
result = "turbulence" />
< feDisplacementMap in2 = "turbulence"
in = "SourceGraphic"
scale = "50"
xChannelSelector = "R"
yChannelSelector = "B"
id = "gfg" />
</ filter >
< circle cx = "100" cy = "100" r = "100"
stroke = "green" style =
"filter: url(#displacementFilter)" />
< script type = "text/javascript" >
var g = document.getElementById("gfg");
console.log(g.in2);
console.log("in2 value is : ",
g.in2.baseVal)
</ script >
</ svg >
</ body >
</ html >
|
Output:
Supported Browsers:
- Google Chrome
- Edge
- Firefox
- Safari
- Opera
- Internet Explorer
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...