Ultima revisión 02/11/2012

SVG Filters: Uso de feComposite (Composiciones)

Combina dos imágenes pixel a pixel en un mismo espacio usando el canal alfa de Porter-Duff para realizar las operaciones de composición. Las operaciones son over, in, out, atop, xor, and arithmetic.

Hay que tener en cuenta que, en una cierta medida, la imagen resultante puede aumentar de tamaño, incluso si las dos imágenes se superponen.

La primitiva feComposite puede puede ser utilizada para calcular medias e intersecciones. Además, permite tanto la superposición de imágenes como la mezcla relativa de sus valores de los píxeles. Al igual que feMerge se necesitan dos entradas in y in2. Por defecto, in se establece a SourceGraphic.

El atributo operator puede tomar los valores de over, in, out, atop, xor, and arithmetic. Todos ellos, excepto arithmetic son atributos simples, pero cuando se especifica arithmetic, se invocan a otros cuatro que son k1, k2, k3, k4. Estos pesos se asignan respectivamente a:

• Un componente que representa el múltiplo de las dos imágenes.
• El efecto lineal de la primera imagen.
• El efecto lineal de la segunda imagen.
• Un intercepto o ajuste del brillo.

Por ejemplo, cuando el operador está en artithmetic si k1 = "0", k2 = "1", k3 = "-1" y k4 = "1", lo que significa es que el SourceGraphic (in) contribuye de manera positiva, el BackgroundImage (in2) contribuye negativamente y el brillo ha sido aumentado.

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <!-- SIN DEFINICIONES NI FILTROS -->
        <!-- IMAGEN ORIGINAL -->
    </defs>
    <image id="feComposite_image" x = "0" y = "0" width = "100%" height = "100%" xlink:href = "../../img/svg-filters/guitar.png" />
</svg>
<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="feComposite1" filterUnits="objectBoundingBox" >
            <feImage xlink:href="../../img/svg-filters/music.png" x="0" y="0" width="200" height="200" result="D" />
            <feComposite in="SourceGraphic" in2="D" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
        </filter>
    </defs>
    <image id="feComposite_image" x = "0" y = "0" width = "100%" height = "100%" xlink:href = "../../img/svg-filters/guitar.png" />
</svg>
<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="feComposite2">
            <feColorMatrix type="hueRotate" in="SourceGraphic" values="180" result="specOut">
                <animate attributeName="values" values="0; 360"  dur="1.4s" repeatCount="indefinite"/>
            </feColorMatrix>
            <feComposite result="comp" id="feComposite_def" in = "SourceGraphic" in2 = "specOut" operator = "arithmetic" k1 = "1" k2 = "1" k3 = "1" k4 = "0"/>
        </filter>
    </defs>
    <image id="feComposite_image" x = "0" y = "0" width = "100%" height = "100%" xlink:href = "../../img/svg-filters/guitar.png" />
</svg>

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="feComposite3" filterUnits="objectBoundingBox" >
            <feImage xlink:href="../../img/svg-filters/music.png" x="0" y="0" width="200" height="200" result="D" />
            <feComposite in="SourceGraphic" in2="D" operator="in" />
        </filter>
    </defs>
    <image id="feComposite_image" x = "0" y = "0" width = "100%" height = "100%" xlink:href = "../../img/svg-filters/guitar.png" />
</svg>

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="feComposite3" filterUnits="objectBoundingBox" >
            <feImage xlink:href="../../img/svg-filters/music.png" x="0" y="0" width="200" height="200" result="D" />
            <feComposite in="SourceGraphic" in2="D" operator="over" />
        </filter>
    </defs>
    <image id="feComposite_image" x = "0" y = "0" width = "100%" height = "100%" xlink:href = "../../img/svg-filters/guitar.png" />
</svg>

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="feComposite3" filterUnits="objectBoundingBox" >
            <feImage xlink:href="../../img/svg-filters/music.png" x="0" y="0" width="200" height="200" result="D" />
            <feComposite in="SourceGraphic" in2="D" operator="out" />
        </filter>
    </defs>
    <image id="feComposite_image" x = "0" y = "0" width = "100%" height = "100%" xlink:href = "../../img/svg-filters/guitar.png" />
</svg>

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="feComposite3" filterUnits="objectBoundingBox" >
            <feImage xlink:href="../../img/svg-filters/music.png" x="0" y="0" width="200" height="200" result="D" />
            <feComposite in="SourceGraphic" in2="D" operator="atop" />
        </filter>
    </defs>
    <image id="feComposite_image" x = "0" y = "0" width = "100%" height = "100%" xlink:href = "../../img/svg-filters/guitar.png" />
</svg>

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="feComposite3" filterUnits="objectBoundingBox" >
            <feImage xlink:href="../../img/svg-filters/music.png" x="0" y="0" width="200" height="200" result="D" />
            <feComposite in="SourceGraphic" in2="D" operator="xor" />
        </filter>
    </defs>
    <image id="feComposite_image" x = "0" y = "0" width = "100%" height = "100%" xlink:href = "../../img/svg-filters/guitar.png" />
</svg>

De todos los operadores e in, probablemente son más útiles.