SVG yChannelSelector Attribute

Last Updated : 31 Mar, 2022

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.

HTML

<!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.

HTML

<!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> 