El atributo de escala decide el factor de escala de desplazamiento que se debe utilizar en una primitiva de filtro <feDisplacementMap> . Solo el elemento <feDisplacementMap> está usando este atributo.
Sintaxis:
scale = "number"
Valores de atributo: el atributo de escala acepta los valores mencionados anteriormente y descritos a continuación
- número: Es un número entero o un número con un componente fraccionario. El valor predeterminado es igual a 0.
Los siguientes ejemplos ilustran el uso del atributo de escala .
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <body> <div style="color: green; margin-left: 50px;"> <h1>GeeksforGeeks</h1> <svg viewBox="0 0 480 100" xmlns="http://www.w3.org/2000/svg"> <filter id="geek1" x="-20%" y="-20%" width="150%" height="150%"> <feTurbulence type="turbulence" baseFrequency="0.10" numOctaves="2" result="turbulence" /> <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="5" /> </filter> <polygon points="50, 9 60.5, 39.5 92.7, 40.1 67, 59.5 76.4, 90.3 50, 71.9 23.6, 90.3 32.9, 59.5 7.2, 40.1 39.4,39.5" style="filter: url(#geek1);" fill="hsl(106,80%,50%)" /> </svg> </div> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <body> <div style="color: green; margin-left: 50px;"> <h1>GeeksforGeeks</h1> <svg viewBox="0 0 480 100" xmlns="http://www.w3.org/2000/svg"> <filter id="geek2" x="-20%" y="-20%" width="150%" height="150%"> <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence" /> <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="20" /> </filter> <polygon points="50, 9 60.5, 39.5 92.7, 40.1 67, 59.5 76.4, 90.3 50, 71.9 23.6, 90.3 32.9, 59.5 7.2, 40.1 39.4, 39.5" style="filter: url(#geek2);" fill="hsl(106,80%,50%)" /> </svg> </div> </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