Атрибут SVG xChannelSelector

Опубликовано: 25 Февраля, 2022

Атрибут xChannelSelector в SVG используется для указания цветового канала от in2, которое используется для вытеснения пикселей в в вдоль оси х. Только элемент <feDisplacementMap> использует этот атрибут.

Синтаксис:

 yChannelSelector = "R | G | B | A"

Значения атрибутов: атрибут принимает четыре значения, как указано выше и описано ниже:

R: указывает, что канал красного цвета данного изображения, определенный в in2, будет использоваться для смещения пикселей изображения по оси x.
G: он указывает, что канал зеленого цвета данного изображения, определенный в in2, будет использоваться для смещения пикселей изображения по оси x.
B: он указывает, что канал синего цвета данного изображения, определенный в in2, будет использоваться для смещения пикселей изображения по оси x.
A: Он указывает, что альфа-канал данного изображения, определенный в in2, будет использоваться для смещения пикселей изображения по оси x.

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>

Выход:

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>

Выход:

HTML

Атрибут SVG xChannelSelector

HTML

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ