Atributo SVG yChannelSelector

El atributo yChannelSelector en SVG se usa para indicar el canal de in2 que se usa para desplazar los píxeles a lo largo del eje y. Este atributo solo lo utiliza el elemento < feDisplacementMap >.

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 usará para desplazar los píxeles de la imagen a lo largo del eje y.
G: Especifica que el canal de color verde de la imagen dada definida en in2 se usará para desplazar los píxeles de la imagen a lo largo del eje y.
B: Especifica que el canal de color azul de la imagen dada definida en in2 se usará para desplazar los píxeles de la imagen a lo largo del eje y.
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 y.

Ejemplo 1: Este ejemplo ilustra el uso del atributo yChannelSelector usando el valor del atributo «G».

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>

Producción:

Ejemplo 2: Este ejemplo ilustra el uso del atributo yChannelSelector usando 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>
  
        <circle cx="100" cy="100" 
            r="100" 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