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"
< 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"
< 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:
Share your thoughts in the comments
Please Login to comment...