Ultima revisión 05/11/2012

SVG Filters: Uso de feMerge (Combinaciones)

El filtro feMerge permite la combinación de filtros de forma concurrente, en vez de secuencialmente.

En lugar de que cada primitiva de filtro se aplique a la salida de la primitiva de filtro que le precede, feMerge nos proporciona una forma para almacenar temporalmente la salida de cada filtro, para así, colocarlas en el tapiz en orden de abajo hacia arriba. Es evidente que las capas superiores deberían tener cierta transparencia (o estar incompletas) dentro del en el área afectada por el filtro, a fin de permitir que esas capas por debajo sean visibles.

Muchos efectos producen capas intermedias con el fin de crear la imagen de salida final. Como decía, este filtro nos permite unir todas ellas en una sola imagen. Esto se podría hacer mediante el uso de filtros feComposite pero, es más conveniente realizar esta operación de esta forma, y ofrecer a la aplicación algo más de flexibilidad.

El elemento feMerge puede tener uno o varios sub-elementos feMergeNode, en los que se debería especificar el atributo in.

La implementación canónica de feMerge hace renderizar el efecto íntegro en una capa RGBA, para luego provocar una capa resultante en el dispositivo de salida. En algunos casos (en particular si el dispositivo de salida es en sí un dispositivo de tono continuo), y dado que la fusión es asociativa, podría ser una aproximación suficiente para evaluar el efecto de una capa al tiempo que se renderiza cada capa individualmente desde la parte inferior hasta la parte superior en el dispositivo de salida.

Si la imagen situada más arriba es SourceGraphic y feMerge es el último filtro primitivo en filter, la aplicación o el visor renderiza las capas hasta ese momento, y posteriormente renderiza el SourceGraphic directamente sobre la parte superior.

<?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="test" filterUnits="objectBoundingBox" x="0" y="0" width="1.5" height="4">
            <feOffset result="Off1" dx="5" dy="20"/>
            <feFlood style="flood-color:black;flood-opacity:0.8"/>
            <feComposite in2="Off1" operator="in" result="C1"/>

            <feOffset in="SourceGraphic" result="Off2" dx="20" dy="40"/>
            <feFlood style="flood-color:gray;flood-opacity:0.8"/>
            <feComposite in2="Off2" operator="in" result="C2"/>

            <feMerge>
                <feMergeNode in="C2"/>
                <feMergeNode in="C1"/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
    </defs>
    
    <image id="MyImage1" opacity="1.0" width='160' height='160' xlink:href='../../img/svg-filters/guitar.png' filter="url(#test)" />
    <text x="20" y="160" style="font:36px verdana bold;fill:white;filter:url(#test)">IslaVisual!</text>
</svg>

Los atributos configurables son: