El atributo stitchTiles indica el comportamiento de los mosaicos Perlin Noise en el borde. Solo la primitiva <feTurbulence> está usando este atributo. feTurbulence es uno de los filtros primitivos importantes de SVG que ayuda a simular texturas naturales como nubes o humo y muchas más.
Sintaxis:
stitchTiles = stitch | noStitch
Valores de atributo: el atributo stitchTiles acepta los valores mencionados anteriormente y descritos a continuación.
- puntada: Indica que el usuario ajustará automáticamente los valores x e y de la frecuencia base.
- noStitch: Indica que no se intenta lograr transiciones suaves en el borde de los mosaicos que contienen una función de turbulencia.
Ejemplo 1: Los siguientes ejemplos ilustran el uso del atributo stitchTiles . La primitiva de filtro SVG feTurbulence se utiliza para crear sus propios efectos de distorsión. Aquí se usa la opción noStitch para el atributo stitchTiles .
HTML
<!DOCTYPE html> <html> <body> <h2 style="color: green; font-size: 40px;"> GeeksforGeeks </h2> <p style="margin-left:30px;"> <b>SVG filter effects</b> </p> <!--SVG container for graphical images --> <svg viewBox="0 0 620 400" xmlns="http://www.w3.org/2000/svg"> <!--Adding filter element for special effects --> <filter id="filterID1" x="0" y="0" width="100%" height="100%"> <!-- feTurbulence to fill the region with no smoothness--> <feTurbulence baseFrequency="0.035" numOctaves="8" seed="5" stitchTiles="noStitch" /> <!-- "noStitch" option is given above for NO smooth noise--> </filter> <!--Variations of rectangle is used --> <rect x="10" y="0" width="50" height="50" style="filter: url(#filterID1);" /> <rect x="10" y="0" width="50" height="50" style="filter: url(#filterID1); transform: translate(50px, 0);" /> <!--translate is used for moving to new location --> <rect x="10" y="0" width="50" height="50" style="filter: url(#filterID1); transform: translate(0, 50px);" /> <rect x="10" y="0" width="50" height="50" style="filter: url(#filterID1); transform: translate(50px, 50px);" /> </svg> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <body> <h2 style="color: green; font-size:30px; margin-left:10px;"> GeeksforGeeks </h2> <p style="margin-left:30px;"> <b>SVG filter effects</b> </p> <svg viewBox="200 0 720 500" xmlns="http://www.w3.org/2000/svg"> <!-- stitchTiles attribute have values as "stitch" or "noStitch"--> <filter id="filterID" x="0" y="0" width="100%" height="100%"> <!-- feTurbulence fills the region with some content with perlin turbulence function--> <feTurbulence baseFrequency="0.025" numOctaves="8" seed="5" stitchTiles="stitch" /> <!-- "stitch" option is given above for smooth noise --> </filter> <!-- Variations of rectangle is used --> <rect width="50" height="50" style="filter: url(#filterID); transform: translate(220px, 0);" /> <!-- Translate is used for moving to new location --> <rect width="50" height="50" style="filter: url(#filterID); transform: translate(270px, 0);" /> <rect width="50" height="50" style="filter: url(#filterID); transform: translate(220px, 50px);" /> <rect width="50" height="50" style="filter: url(#filterID); transform: translate(270px, 50px);" /> </svg> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA