La primitiva de filtro SVG <feTile> permite rellenar un rectángulo de destino con un patrón de mosaico repetido de una imagen de entrada.
Sintaxis:
<feTile in="" x="" y="" width="" height="" />
Atributos:
- in: el atributo in identifica la entrada para la primitiva de filtro dada.
- x: Define la coordenada del eje x en el sistema de coordenadas del usuario.
- y: Define la coordenada del eje y en el sistema de coordenadas del usuario
- ancho: el ancho del objeto extranjero.
- altura: La altura del objeto extraño.
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <body> <svg width="200" height="200"> <filter id="feOffset" x="-40" y="-20" width="100" height="200"> <feOffset in="SourceGraphic" dx="60" dy="60" /> <feGaussianBlur stdDeviation="5" result="blur2" /> <feTile in="SourceGraphic" x="50" y="50" width="100" height="100" /> <feTile /> </filter> <rect x="1" y="1" width="198" height="118" fill="green" stroke="blue" /> <circle cx="100" cy="60" r="55" stroke="black" stroke-width="3" fill="white" /> <g fill="#FFFFFF" stroke="Green" font-size="10" font-family="Verdana"> <text x="60" y="62">GeeksForGeeks</text> </svg> </body> </html>
Salida :
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <body> <svg width="200" height="200"> <defs> <filter id="tile" x="0" y="0" width="100%" height="100%"> <feTile in="BackgroundImage" x="50" y="50" width="100" height="100" /> <feTile /> </filter> </defs> <image xlink:href= "C:/Users/pc/Desktop/gfg/capture42.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#tile);" /> </svg> </body> </html>
Producción :
Ejemplo 3:
HTML
<!DOCTYPE html> <html> <body> <svg width="200" height="200"> <defs> <filter id="tile" x="0" y="0" width="100%" height="100%"> <feTile in="FillPaint" x="100" y="100" width="120" height="120" /> <feTile /> </filter> </defs> <image xlink:href= "C:/Users/pc/Desktop/gfg/capture25.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#tile);" /> </svg> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por epistler_999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA