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

Ultima revisión 05/11/2012

SVG Filters: Uso de feTile (Azulejos - Embaldosar)

La primitiva de filtro feFlood es para rect como feImage es para image. De la misma forma, feTile es directamente similar a pattern. Nos permite llevar patrones de repetición de imágenes en el filtro, de modo que luego se puedan utilizar para crear efectos.

Esta primitiva de filtro rellena un rectángulo blanco con un patrón repetido de "azulejos" de una determinada imagen. El rectángulo de destino es tan grande como la subregión de la primitiva del filtro establecida por la anchura x, y, width y height de feTile.

Normalmente, la imagen de entrada se define con su propia subregión primitiva de filtro con el fin de definir un "azulejo" de referencia. feTile replica el "azulejo" de referencia en tanto X como Y para llenar completamente el rectángulo de destino.

Se debe tomar las medidas de precaución en la construcción de la imagen en mosaico para evitar efectos no deseados entre las "azulejo", sobre todo en situaciones en las que el usuario transforma una imagen que incluye cortes y / o rotaciones. A menos que se tenga cuidado, la interpolación puede conducir a que los píxeles del borde del "azulejo" tengan valores de opacidad distinto a lo esperado debido a la interacción de los azulejos adyacentes que tiene cada uno los cuales tiene una superposición parcial con pixeles particulares.


<svg width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <image xlink:href="../../img/svg-filters/paisajes3d.jpg" result="one" x="0" y="0" width="100%" height="100%"/>
    <filter id="T" filterUnits="objectBoundingBox" x="0" y="0" height="100%" width="100%" >
        <feImage xlink:href="../../img/svg-filters/guitar.png" result="one" x="0" y="15" width="50" height="50"/>
        <feImage xlink:href="../../img/svg-filters/music.png"  result="two" x="25" y="0" width="50" height="50"/>
        <feMerge><feMergeNode in="one"/><feMergeNode in="two"/></feMerge>
        <feTile/>
    </filter>
    <rect x="0" y="0" height="100%" width="100%" filter="url(#T)" />
</svg>

Esta primitiva de filtro no tiene atributos.

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.