SVG <feCompuesto> Elemento

Posted on by Rudeus Greyrat

SVG significa Gráfico vectorial escalable. Se puede usar para hacer gráficos y animaciones como en el lienzo HTML. SVG ha sido desarrollado por el World Wide Web Consortium (W3C) desde 1999.

El elemento de filtro SVG <feComposite> realiza la combinación matemática de dos entradas por píxel en el espacio de la imagen y entradas basadas en áreas transparentes como el fondo de la imagen, usando una de las operaciones: encima, dentro, encima, fuera, xor, más ligero, o aritmética.

Sintaxis:

<filter>
    <feImage xlink:href="" />
    <feComposite in="" in2="" operator=""/>    
</filter>

Valores de atributos:

  • in, in2: Especifica la entrada para las primitivas de filtro dadas.
  • operador : este atributo especifica 2 significados para el contexto en el que se utilizará, es decir, puede definir la operación de composición o la operación de transformación, que se realizará para las 2 entradas dadas.
  • k1, k2, k3, k4 : Especifica los valores que se utilizarán para la operación aritmética de la primitiva de filtro <feComposite>.

Operaciones del elemento SVG <feComposite>:

<feComposite operator=”over” in=”A” in2=”B”/>: Es la operación predeterminada que se usará cuando no se realicen operaciones u operaciones que no sean compatibles con la imagen y la imagen proporcionarse en su tamaño y posición originales. Este operador trata las dos imágenes como capas que se superponen entre sí, como la capa superior, que se mostrará a través de partes de la capa inferior. Aquí, el atributo “ in2 ” se usa para el círculo.

Ejemplo 1: En este ejemplo, usamos el logotipo de GFG para una operación de » sobre » para el fondo con un círculo rojo.

HTML

<!DOCTYPE html>
  
<html>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>SVG <feComposite > Element</h3>
    <svg style="width:800px; height:400px; display:inline;">
        <defs>
            <filter id="image">
                <feImage xlink:href=
"https://media.geeksforgeeks.org/wp-content/uploads/20220721122028/GeeksforGeeks.png" 
                        x="10px" y="10px"
                    width="160px" />
                <feComposite in2="SourceGraphic" 
                             operator="over" />
            </filter>
        </defs>
        <g transform="translate(0,25)">
            <circle cx="90px" 
                    cy="80px" 
                    r="70px" 
                    fill="#c00" 
                    style="filter:url(#image)" />
            <text x="80" y="-5">over</text>
        </g>
    </svg>
</body>
</html>

Producción:

 

<feComposite operator=”in” in=”A” in2=”B”/>: este operador se puede utilizar para mostrar la parte de los gráficos de origen (declarados en el atributo in ) que se superpone con los gráficos de destino (declarados en el in2 atributo) , descartando los gráficos de destino. Aquí, el in = «A» se usa para el logotipo de fondo transparente y el in2 = «B» se usa para el círculo.

Ejemplo 2: En este ejemplo, tomamos un logotipo de GFG para el fondo del círculo y usamos una operación de «entrada» que oculta la capa exterior del círculo.

HTML

<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>SVG <feComposite > Element</h3>
    <svg style="width:800px; height:400px; display:inline;">
        <defs>
            <filter id="imagein">
                <feImage xlink:href=
"https://media.geeksforgeeks.org/wp-content/uploads/20220721122028/GeeksforGeeks.png" 
                         x="10px" y="10px"
                    width="160px" />
                <feComposite in2="SourceGraphic" operator="in" />
            </filter>
        </defs>
        <g transform="translate(0,25)">
            <circle cx="90px" 
                    cy="80px"
                    r="70px" 
                    fill="#c00"
                    style="filter:url(#imagein)" />
            <text x="80" y="-5">in</text>
        </g>
    </svg>
</body>
</html>

Producción:

 

<feComposite operator=”out” in=”A” in2=”B”/>: Este operador muestra la parte de los gráficos de origen, declarada en el atributo in, que se encuentra fuera del gráfico de destino (declarada en el atributo in2 ) . Aquí, el in = «A» se usa para el logotipo de fondo transparente y el in2 = «B» se usa para el círculo.

Ejemplo 3:  En este ejemplo, tomamos el logotipo, creamos el fondo del círculo y usamos una operación de «fuera» para ocultar la capa interna del círculo.

HTML

<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>SVG <feComposite > Element</h3>
    <svg style="width:800px; height:400px; display: inline;">
        <defs>
            <filter id="image">
                <feImage xlink:href=
"https://media.geeksforgeeks.org/wp-content/uploads/20220721122028/GeeksforGeeks.png" 
                         x="10px" y="10px"
                    width="160px" />
                <feComposite in2="SourceGraphic" operator="out" />
            </filter>
        </defs>
        <g transform="translate(0,25)">
            <circle cx="90px" 
                    cy="80px"
                    r="70px" 
                    fill="#c00" 
                    style="filter:url(#image)" />
            <text x="80" y="-5">Out</text>
        </g>
    </svg>
</body>
</html>

Producción:

 

<feComposite operator=”xor” in=”A” in2=”B”/>: Este operador compuesto muestra una imagen que se usa con frecuencia para crear una imagen compuesta de dos imágenes contrastadas con una textura. La primera imagen se utiliza como origen, mientras que la segunda se utiliza como destino. El resultado es una imagen que contiene partes de las dos imágenes de origen. Aquí, in = «A» se usa para el logotipo de fondo transparente, y in2 = «B» se usa para el círculo.

Ejemplo 4: En este ejemplo, tomamos el logotipo y creamos el fondo del círculo y usamos una operación «xor» que establece una capa exterior de color circular en la capa lateral interior del círculo del logotipo gfg.

HTML

<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>SVG <feComposite > Element</h3>
    <svg style="width:800px; height:450px;">
  
        <defs>
            <filter id="imageXor">
                <feImage xlink:href=
"https://media.geeksforgeeks.org/wp-content/uploads/20220721122028/GeeksforGeeks.png"
                         x="10px" y="10px" width="160px" />
                <feComposite in2="SourceGraphic" operator="xor" />
            </filter>
        </defs>
        <g transform="translate(0,240)">
            <circle cx="90px" 
                    cy="80px" 
                    r="70px"
                    fill="#c00" 
                    style="filter:url(#imageXor)" />
            <text x="80" y="-5">xor</text>
       </g>
    </svg>
</body>
</html>

Producción:

 

<feComposite in=”A” in2=”B” operator=”arithmetic”…/>: La salida de los filtros <feDiffuseLighting> y <feSpecularLighting> que tienen los datos de textura, se puede combinar con la opción de ayuda aritmética, donde result for cada canal de cada píxel se calcula de la siguiente manera:

k1 * A * B + k2 * A + k3 * B + k4

dónde,

A y B son los valores para ese canal y píxel de los gráficos de entrada.

  • k1, k2, k3 y k4 denotan el valor del atributo que tiene el mismo nombre.

    El operador compuesto muestra la imagen según los valores aritméticos.

    Ejemplo 5: En este ejemplo, tomamos un logo gfg y hacemos el círculo de fondo y usamos una operación «aritmética» que ayuda a editar el logo y su círculo de fondo.

    HTML

    <!DOCTYPE html>
    <html>
      
    <body>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h3>SVG <feComposite > Element</h3>
        <svg style="width:800px; height:400px; display: inline;">
            <defs>
                <filter id="imageArithmetic">
                    <feImage xlink:href=
    "https://media.geeksforgeeks.org/wp-content/uploads/20220721122028/GeeksforGeeks.png" 
                             x="10px" y="10px" width="160px" />
                    <feComposite in2="SourceGraphic"
                                 operator="arithmetic"
                                 k1="0.1" k2="0.2" k3="0.3" k4="0.4" />
                </filter>
            </defs>
            <g transform="translate(0,25)">
      
                <circle cx="90px" 
                        cy="80px" 
                        r="70px" 
                        fill="#c00" 
                        style="filter:url(#imageArithmetic)" />
                <text x="80" y="-5">Arithmetic</text>
            </g>
        </svg>
    </body>
    </html>

    Producción:

     

    <feComposite operator=”atop” in=”A” in2=”B”/>: Esta operación indica el atributo “in”, que se superpone al gráfico de destino definido en el atributo “in2″ y reemplaza el gráfico de destino. Las partes del gráfico de destino que no se superponen con el gráfico de origen permanecen intactas. Aquí, in = «A» se usa para el logotipo de fondo transparente, y in2 = «B» se usa para el círculo.

    Ejemplo 6: En este ejemplo, tomamos un logotipo gfg y hacemos el fondo del círculo, y usamos una operación «encima» que oculta la capa exterior del círculo.

    HTML

    <!DOCTYPE html>
    <html>
      
    <body>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h3>SVG <feComposite > Element</h3>
        <svg style="width:800px; height:400px; display:inline;">
            <defs>
                <filter id="image">
                    <feImage xlink:href=
    "https://media.geeksforgeeks.org/wp-content/uploads/20220721122028/GeeksforGeeks.png"
                             x="10px" y="10px" width="160px" />
                    <feComposite in2="SourceGraphic" operator="atop" />
                </filter>
            </defs>
            <g transform="translate(0,25)">
                <circle cx="90px" 
                        cy="80px" 
                        r="70px" 
                        fill="#c00" 
                        style="filter:url(#image)" />
                <text x="80" y="-5">atop</text>
            </g>
        </svg>
    </body>
    </html>

    Producción:

     

    <feComposite operator=”lighter” in=”A” in2=”B”/>: Este valor indica que se muestra el atributo “in” y el gráfico de destino definido en el atributo “in2”.

    El operador de operación más ligero de la imagen de pantallas de operador compuesto se usa con frecuencia para crear una imagen compuesta de dos imágenes en la parte superior de textura diferente 

    Ejemplo 7: En este ejemplo, tomamos un logotipo gfg y creamos el fondo del círculo, y usamos una operación «más clara» que lo combina con la capa exterior del círculo.

    HTML

    <!DOCTYPE html>
    <html>
      
    <body>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h3>SVG <feComposite > Element</h3>
        <svg style="width:800px; height:400px; display:inline;">
            <defs>
                <filter id="image">
                    <feImage xlink:href=
    "https://media.geeksforgeeks.org/wp-content/uploads/20220721122028/GeeksforGeeks.png" 
                             x="10px" y="10px" width="160px" />
                    <feComposite in2="SourceGraphic" operator="lighter" />
                </filter>
            </defs>
            <g transform="translate(0,25)">
                <circle cx="90px"
                        cy="80px" 
                        r="70px" 
                        fill="#c00"
                        style="filter:url(#image)" />
                <text x="80" y="-5">lighter</text>
            </g>
        </svg>
    </body>
    </html>

    Producción:

     

    • Publicación traducida automáticamente

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

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *