The xChannelSelector attribute in SVG is used to indicate color channel from in2 that is use to displace the pixels in in along the x-axis. Only <feDisplacementMap> element is using this attribute.
Syntax:
yChannelSelector = "R | G | B | A"
Attribute Values: The attribute accepts four values as mentioned above and described below:
- R: It specifies that the red color channel of the given image defined in in2 will be used to displace the pixels of the image along the x-axis.
- G: It specifies that the green color channel of the given image defined in in2 will be used to displace the pixels of the image along the x-axis.
- B: It specifies that the blue color channel of the given image defined in in2 will be used to displace the pixels of the image along the x-axis.
- A: It specifies that the alpha channel of the given image defined in in2 will be used to displace the pixels of the image along the x-axis.
Example 1: This example illustrates the use of the xChannelSelector attribute using the “R” attribute value.
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<svg width="200" height="200"
viewBox="0 0 220 220"
xmlns="http://www.w3.org/2000/svg">
<filter id="geek">
<feTurbulence
type="turbulence"
baseFrequency="0.05"
numOctaves="2"
result="turbulence"/>
<feDisplacementMap in2="turbulence"
in="SourceGraphic"
scale="50"
xChannelSelector="R"
yChannelSelector="R"/>
</filter>
<ellipse cx="100" cy="80"
rx="100" ry="70"
style="fill:green;
filter: url(#geek)"/>
</svg>
</body>
</html>
Output:
Example 2: This example illustrates the use of the xChannelSelector attribute using the “R” attribute value.
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;
margin-left: 20px;">
GeeksforGeeks
</h1>
<svg width="1800"
height="1800"
viewBox="25 10 400 400"
xmlns="http://www.w3.org/2000/svg">
<filter id="geek">
<feTurbulence
type="turbulence"
baseFrequency="0.06"
numOctaves="3"
result="turbulence"/>
<feDisplacementMap
in2="turbulence"
in="SourceGraphic"
scale="10"
xChannelSelector="R"
yChannelSelector="G"/>
</filter>
<polygon points="50 10 55 30 70 30 60
40 65 55 50 45 35 55
40 40 30 30 45 30"
stroke="green"
fill="green"
style="filter: url(#geek)"/>
</svg>
</body>
</html>
Output:
