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.