Ultima revisión 05/11/2012

SVG Filters: Uso de feFlood (Inundaciones)

Esta primitiva de filtro crea un rectángulo relleno con el color y la opacidad de los valores de las propiedades del flood-color y flood-opacity. La posición, ancho y alto se establece por los atributos de x, y, width y height del elemento filter.

Dicho de otra forma, la primitiva feFlood permite una manera distinta de dibujar un rectángulo en la pantalla. La diferencia entre éste y los creados a través de rect es que, éstos, se pueden combinar fácilmente sobre la marcha con una variedad de otros filtros.

<?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="feFlood_image" x = "0" y = "0" width = "100%" height = "100%" xlink:href='../../img/svg-filters/butterfly_th.jpg' />
</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='feFlood1'  filterUnits="userSpaceOnUse" x="10" y="10" width="190" height="190">
            <feFlood flood-color="black" flood-opacity='1' result='pict2'/>
            <feComposite in='SourceGraphic' in2='pict2' operator="arithmetic" k1="1" k2="1" k3="1" k4="0"/>
        </filter>
    </defs>
    <image id="feFlood_image" x = "0" y = "0" width = "100%" height = "100%" xlink:href='../../img/svg-filters/butterfly_th.jpg' filter="url(#feFlood1)" />
</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='feFlood2'  filterUnits="userSpaceOnUse" x="100" y="10" width="190" height="190">
            <feFlood flood-color="peru" flood-opacity='1' result='pict2'/>
            <feComposite in='SourceGraphic' in2='pict2' operator="arithmetic" k1="1" k2="1" k3="1" k4="0"/>
        </filter>
    </defs>
    <image id="feFlood_image" x = "0" y = "0" width = "100%" height = "100%" xlink:href='../../img/svg-filters/butterfly_th.jpg' filter="url(#feFlood2)" />
</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='feFlood3'  filterUnits="userSpaceOnUse" x="0" y="10" width="100" height="190">
            <feFlood flood-color="blue" flood-opacity='0.5' result='pict2'/>
            <feComposite in='SourceGraphic' in2='pict2' operator="arithmetic" k1="1" k2="1" k3="1" k4="0"/>
        </filter>
    </defs>
    <image id="feFlood_image" x = "0" y = "0" width = "100%" height = "100%" xlink:href='../../img/svg-filters/butterfly_th.jpg' filter="url(#feFlood3)" />
</svg>

Los atributos configurables son: