The SVG FEDisplacementMap.xChannelSelector property returns the SVGAnimatedEnumeration object corresponding to the xChannelSelector component of the FEDisplacementMap.xChannelSelector element.
Syntax:
var a = FEDisplacementMap.xChannelSelector
Return value: This property returns the SVGAnimatedEnumeration object corresponding to the xChannelSelector component of the FEDisplacementMap.xChannelSelector 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 = "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.xChannelSelector)
console.log("xChannelSelector value is : ",
g.xChannelSelector.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 = "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.xChannelSelector)
console.log("xChannelSelector value is : ",
g.xChannelSelector.baseVal)
</ script >
</ svg >
</ body >
</ html >
|
Output:
Supported Browsers:
- Google Chrome
- Edge
- Firefox
- Safari
- Opera
- Internet Explorer