Atributo SVG xChannelSelector

El atributo xChannelSelector en SVG se usa para indicar el canal de color de in2 que se usa para desplazar los píxeles a lo largo del eje x. Solo el elemento <feDisplacementMap> está usando este atributo.

Sintaxis:

yChannelSelector = "R | G | B | A"

Valores de atributo: el atributo acepta cuatro valores, como se mencionó anteriormente y se describe a continuación:

R: Especifica que el canal de color rojo de la imagen dada definida en in2 se utilizará para desplazar los píxeles de la imagen a lo largo del eje x.
G: Especifica que el canal de color verde de la imagen dada definida en in2 se utilizará para desplazar los píxeles de la imagen a lo largo del eje x.
B: Especifica que el canal de color azul de la imagen dada definida en in2 se utilizará para desplazar los píxeles de la imagen a lo largo del eje x.
R: Especifica que el canal alfa de la imagen dada definida en in2 se usará para desplazar los píxeles de la imagen a lo largo del eje x.

Ejemplo 1: este ejemplo ilustra el uso del atributo xChannelSelector utilizando el valor del atributo «R».

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>

Producción:

Ejemplo 2: este ejemplo ilustra el uso del atributo xChannelSelector utilizando el valor del atributo «R».

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>

Producción:

Publicación traducida automáticamente

Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

HTML

Deja una respuesta Cancelar la respuesta