Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

SVG xChannelSelector Attribute

  • Last Updated : 31 Mar, 2022

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.

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

HTML




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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!