El atributo surfaceScale sirve como la altura de la superficie. Los elementos que usan este atributo incluyen <feSpecularLighting> y <feDiffuseLighting>
Sintaxis:
surfaceScale = "number"
Valores de los atributos: el atributo surfaceScale acepta los valores mencionados anteriormente y descritos a continuación.
- número: este valor de atributo acepta números como un entero sin formato, una fracción positiva, una fracción negativa, cero, un número fraccionario sin un cero inicial, etc.
Nota: el valor del atributo predeterminado se considera 1.
Ejemplo 1: los siguientes ejemplos ilustran el uso del atributo de superficie .
HTML
<!DOCTYPE html> <html> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <p> value of surfaceScale = "1" </p> <svg viewBox="0 0 820 600" xmlns="http://www.w3.org/2000/svg"> <filter id="geek1" x="0" y="0" width="100%" height="100%"> <feDiffuseLighting surfaceScale="1"> <fePointLight x="60" y="60" z="20" /> </feDiffuseLighting> </filter> <rect width="150" height="150" style="filter: url(#geek1);" /> </svg> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <p> value of surfaceScale = "20" </p> <svg viewBox="0 0 820 600" xmlns="http://www.w3.org/2000/svg"> <filter id="geeks2" x="0" y="0" width="100%" height="100%"> <feDiffuseLighting in="SourceGraphic" surfaceScale="20"> <fePointLight x="60" y="60" z="20" /> </feDiffuseLighting> </filter> <rect x="0" y="0" width="150" height="150" style="filter: url(#geeks2);" /> </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