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

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.

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.