Logo de islavisual
Logo de islavisual IslaVisual
imagen de sección

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.

Ejemplo: 
<?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>

Los atributos configurables son:

AtributoDescripción
indica qué color utilizar para inundar el actual subregión primitiva de filtro. La palabra clave currentColor e colores ICC pueden ser especificadas de la misma forma que en una especificación de paint para el fill y stroke
Puede tener los valores currentColor, color o icc-color(nombre[, valor]). Su valor por defecto es negro.
Define el valor de opacidad para utilizar en toda la subregión de la primitiva de filtro. Su valor por defecto es 1.

Sobre el autor

Pablo Enrique Fernández Casado

CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.

Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.