The yChannelSelector attribute in SVG is used to indicate the channel from in2 that is used to displace the pixels in in along the y-axis. This attribute is used by only <feDisplacementMap> element.
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 y-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 y-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 y-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 y-axis.
Example 1: This example illustrates the use of the yChannelSelector attribute using the "G" attribute value.
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;
margin-left: 20px;">
GeeksforGeeks
</h1>
<svg width="500"
height="500"
viewBox="-30 50 200 100"
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="40"
xChannelSelector="R"
yChannelSelector="G"/>
</filter>
<polygon points="0 0, 100 100, 0 100"
fill ="green"
style="filter: url(#geek)"/>
</svg>
</body>
</html>
Output:
Example 2: This example illustrates the use of the yChannelSelector 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>
<circle cx="100" cy="100"
r="100" fill ="green"
style="filter: url(#geek)"/>
</svg>
</body>
</html>
Output:
