El atributo numOctaves define el número de octavas para la función de ruido de la primitiva <feTurbulence> . Solo el elemento <feTurbulence> está usando este atributo.
Sintaxis:
numOctaves = "integer"
Valores de atributo: el atributo numOctaves acepta los valores mencionados anteriormente y descritos a continuación
- entero: Este valor muestra el número de octavas.
Ejemplo 1: El siguiente ejemplo ilustra el uso del atributo numOctaves .
HTML
<!DOCTYPE html> <html> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <svg width="200" height="200" viewBox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="geek1"> <feTurbulence baseFrequency="0.05" numOctaves="1" result="turbulence" /> <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="50" xChannelSelector="R" yChannelSelector="G" /> </filter> <circle cx="100" cy="100" r="100" fill="green" style="filter: url(#geek1)" /> </svg> </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="5" 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>
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA