Ultima revisión 01/11/2012

SVG Filters: Uso de feGaussianBlur (Filtro Gausiano)

Se utiliza para realizar un desenfoque gaussiano en la imagen. Tiene 2 atributos para realizar distintas acciones.

In:

<?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="feGaussianBlur_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" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="Gaussian_Blur">
            <feGaussianBlur in="SourceGraphic" stdDeviation="3">
                <animate attributeName="stdDeviation" values="0;0.2;0.4;0.6;0.8;1.0;1.2;1.4;1.6;1.8;2.0;2.2;2.4;2.6;2.8;3.0;2.8;2.6;2.4;2.2;2.0;1.8;1.6;1.4;1.0;0.8;0.6;0.4;0.2;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0"  dur="1.5s" repeatCount="indefinite"/>
            </feGaussianBlur>
        </filter>
    </defs>
    <image id="feGaussianBlur_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" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="Gaussian_Blur">
            <feGaussianBlur in="SourceAlpha" stdDeviation="3">
                <animate attributeName="stdDeviation" values="0;0.2;0.4;0.6;0.8;1.0;1.2;1.4;1.6;1.8;2.0;2.2;2.4;2.6;2.8;3.0;2.8;2.6;2.4;2.2;2.0;1.8;1.6;1.4;1.0;0.8;0.6;0.4;0.2;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0"  dur="1.5s" repeatCount="indefinite"/>
            </feGaussianBlur>
        </filter>
    </defs>
    <image id="feGaussianBlur_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" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="Gaussian_Blur">
            <feGaussianBlur in="BackgroundImage" stdDeviation="3">
                <animate attributeName="stdDeviation" values="0;0.2;0.4;0.6;0.8;1.0;1.2;1.4;1.6;1.8;2.0;2.2;2.4;2.6;2.8;3.0;2.8;2.6;2.4;2.2;2.0;1.8;1.6;1.4;1.0;0.8;0.6;0.4;0.2;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0"  dur="1.5s" repeatCount="indefinite"/>
            </feGaussianBlur>
        </filter>
    </defs>
    <image id="feGaussianBlur_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" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="Gaussian_Blur">
            <feGaussianBlur in="BackgroundAlpha" stdDeviation="3">
                <animate attributeName="stdDeviation" values="0;0.2;0.4;0.6;0.8;1.0;1.2;1.4;1.6;1.8;2.0;2.2;2.4;2.6;2.8;3.0;2.8;2.6;2.4;2.2;2.0;1.8;1.6;1.4;1.0;0.8;0.6;0.4;0.2;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0"  dur="1.5s" repeatCount="indefinite"/>
            </feGaussianBlur>
        </filter>
    </defs>
    <image id="feGaussianBlur_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" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="Gaussian_Blur">
            <feGaussianBlur in="FillPaint" stdDeviation="3">
                <animate attributeName="stdDeviation" values="0;0.2;0.4;0.6;0.8;1.0;1.2;1.4;1.6;1.8;2.0;2.2;2.4;2.6;2.8;3.0;2.8;2.6;2.4;2.2;2.0;1.8;1.6;1.4;1.0;0.8;0.6;0.4;0.2;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0"  dur="1.5s" repeatCount="indefinite"/>
            </feGaussianBlur>
        </filter>
    </defs>
    <image id="feGaussianBlur_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" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="Gaussian_Blur">
            <feGaussianBlur in="StrokePaint" stdDeviation="3">
                <animate attributeName="stdDeviation" values="0;0.2;0.4;0.6;0.8;1.0;1.2;1.4;1.6;1.8;2.0;2.2;2.4;2.6;2.8;3.0;2.8;2.6;2.4;2.2;2.0;1.8;1.6;1.4;1.0;0.8;0.6;0.4;0.2;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0"  dur="1.5s" repeatCount="indefinite"/>
            </feGaussianBlur>
        </filter>
    </defs>
    <image id="feGaussianBlur_image" x = "0" y = "0" width = "100%" height = "100%" xlink:href = "../../img/svg-filters/guitar.png" />
</svg>

stdDesviation que define la desviación estándar para la operación de desenfoque.

in que define dónde y cómo se realizará la operación de desenfoque.

Keyword	Definición
SourceGraphic	Representa a los elementos gráficos que están comprendidos entre <filter> y </filter>.
SourceAlpha	Representa los elementos gráficos que estan comprendidos entre <filter> y </filter>. SourceAlpha tiene las mismas reglas que SourceGraphic a excepción de que sólo el canal alfa se utiliza.
BackgroundImage	BackgroundImage representa una instantánea de la imagen del tapiz bajo la declaración del filtro en el momento en que filter fue invocado.
BackgroundAlpha	Igual que BackgroundImage exceptuando que sólo utiliza el canal alfa.
FillPaint	Representa el valor de la propiedad fill sobre el elemento destino en el que se aplica el filtro. Frecuentemente esta imagen es opaca en todas partes, pero pudiera ser que no si, el "dibujo" en sí tiene alfa, como en el caso de un gradiente o patrón que, en su propia definición, incluyese partes transparentes o semi-transparentes.
StrokePaint	Representa el valor de la propiedad stroke sobre el elemento destino en el que se aplica el filtro. Frecuentemente esta imagen es opaca en todas partes, pero pudiera ser que no si, el "dibujo" en sí tiene alfa, como en el caso de un gradiente o patrón que, en su propia definición, incluyese partes transparentes o semi-transparentes.

SVG Filters: Uso de feGaussianBlur (Filtro Gausiano)

Consentimiento para cookies y datos