Banner

Ultima revisión 05/11/2012

SVG Filters: Uso de feOffset (Compensaciones)

Esta primitiva se utiliza para mover un elemento o pedazo de imagen, típicamente la referenciada por SourceGraphic o BackgroundImage, alrededor del lienzo o tapiz dentro de un filtro con propósitos de la realineación.

Es importante si queremos producir sombras paralelas.

<svg width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <filter id="offset"  x="0" y="0" height="100%" width="100%">
        <feGaussianBlur stdDeviation="3"/>
        <feOffset dx="0" dy="15" result="B">
            <animate attributeName="dx"  dur="1s" values="0;10;0" repeatCount="indefinite"/>
            <animate attributeName="dy"  dur="1s" values="0;10;0" repeatCount="indefinite"/>
        </feOffset>
        <feMerge><feMergeNode in="B"/><feMergeNode in="SourceGraphic"/></feMerge>
    </filter>
    <image x="0" y="0" xlink:href="../../img/svg-filters/guitar.png"  height="100%" width="100%" filter="url(#offset)" />
</svg>

Los atributos configurables son:

AtributoDefinición
La cantidad a compensar para la entrada de gráficos a lo largo del eje X. La cantidad de desplazamiento se expresa en el sistema de coordenadas establecido por primitiveUnits de el elemento filtro. Su valor por defecto es 0.
La cantidad a compensar para la entrada de gráficos a lo largo del eje Y. La cantidad de desplazamiento se expresa en el sistema de coordenadas establecido por primitiveUnits de el elemento filtro. Su valor por defecto es 0.