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>

Output:

My Personal Notes

Related Articles

Table of Contents

SVG yChannelSelector Attribute

HTML

HTML

Start Your Coding Journey Now!