Ultima revisión 05/11/2012

SVG Filters: Uso de feMorphology (Morfologías)

Este primitiva de filtro interpreta una dilatación o erosión de la imagen. Es particularmente útil para usarlo con el canal alfa.

El núcleo de dilatación (o erosión) es un rectángulo con un ancho de (2 * x) de radio y una altura de (2 * y-radio). En la dilatación, el píxel de salida es el máximo valor de la componente individual que corresponde a los valores R, G, B, A del núcleo del rectángulo de la imagen de entrada. En la erosión, el píxel de salida es el mínimo.

Frecuentemente esta operación se lleva a cabo en imágenes que son total o parcialmente transparentes, tal y como produce el parámetro SourceAlpha.

Si la entrada tiene extensión infinita y es constante, esta operación no tiene ningún efecto. Si la entrada tiene extensión infinita y es repetible en la zona de interacción del gráfico, el filtro se evalúa con condiciones periódicas.

A causa de que feMorphology funciona en los valores de color premultiplicados, siempre surtirá efecto en valores de color menores o iguales al canal alfa.

Existen algunos filtros interesantes que no necesariamente reciben de entrada pero son capaces de crear imágenes por sí mismos. Son los más comúnmente usados en conjunción con otros filtros, pero pueden ser más útiles cuando se trata de la construcción de imágenes o en el procesamiento de otras imágenes. Los más importantes son feFlood, feTile, feTurbulence, feMorphology y feSpecularLighting.

Filtro:

<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 x = "0" y = "0" width = "100%" height = "100%" 
        xlink:href = "../../img/svg-filters/guitar.png" />
</svg><svg width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="feMorphology" filterUnits="objectBoundingBox" x="0" y="0" width="1.5" height="4">
            <feMorphology operator="dilate"  radius="5" result="A">
                <animate attributeName="radius" values="0;5;0"  dur="1s" repeatCount="indefinite"/>
            </feMorphology>
            <feMerge><feMergeNode in="A"/><feMergeNode in="SourceGraphic"/></feMerge>
        </filter>
    </defs>
    <image x="20" y="20" opacity="1.0" width='160' height='160' xlink:href='../../img/svg-filters/guitar.png' filter="url(#feMorphology1)" />
</svg><svg width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="feMorphology" filterUnits="objectBoundingBox" x="0" y="0" width="1.5" height="4">
            <feMorphology operator="erode"  radius="5" result="A">
                <animate attributeName="radius" values="0;5;0"  dur="1s" repeatCount="indefinite"/>
            </feMorphology>
            <feMerge><feMergeNode in="A"/><feMergeNode in="SourceGraphic"/></feMerge>
        </filter>
    </defs>
    <image x="20" y="20" opacity="1.0" width='160' height='160' xlink:href='../../img/svg-filters/guitar.png' filter="url(#feMorphology2)" />
</svg>

Los atributos configurables son:

Atributo	Definición
operator	Indica la operación a usar, dilatación o erosión. Pueden tomar los valores dilate, erode.
radius	Es el radio para la operación. Si se proporcfionan 2 números, el primer número representa un radio X y el segundo valor representa un radio Y. Si aólo se proporciona un número, entonces se utiliza tanto para X como Y. Los valores están en el sistema de coordenadas establecido por primitiveUnits dentro de filter. No puede tomar valores negativos. Un valor de cero desactiva el efecto de la primitiva de filtro que daría como resultado una imagen en negro transparente. Su valor por defecto es 0.

Atributo

Definición

operator

Indica la operación a usar, dilatación o erosión. Pueden tomar los valores dilate, erode.

radius

Es el radio para la operación. Si se proporcfionan 2 números, el primer número representa un radio X y el segundo valor representa un radio Y. Si aólo se proporciona un número, entonces se utiliza tanto para X como Y. Los valores están en el sistema de coordenadas establecido por primitiveUnits dentro de filter.
No puede tomar valores negativos. Un valor de cero desactiva el efecto de la primitiva de filtro que daría como resultado una imagen en negro transparente.
Su valor por defecto es 0.

SVG Filters: Uso de feMorphology (Morfologías)

Consentimiento para cookies y datos