SVG surfaceScale Attribute
Last Updated :
31 Mar, 2022
The surfaceScale attribute serve as the height of the surface. Elements that are using this attribute includes <feSpecularLighting> and <feDiffuseLighting>
Syntax:
surfaceScale = "number"
Attribute values: The surfaceScale attribute accepts the values mentioned above and described below
- number: This attribute value accepts number such as a raw integer, a positive fraction, a negative fraction, zero, a fractional number without a leading zero, etc.
Note: Default attribute value is considered as 1.
Example 1: Below examples illustrate the use of surfaceScale attribute.
HTML
<!DOCTYPE html>
< html >
< body >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< p >
value of surfaceScale = "1"
</ p >
< svg viewBox = "0 0 820 600"
< 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 >
|
Output:
Example 2:
HTML
<!DOCTYPE html>
< html >
< body >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< p >
value of surfaceScale = "20"
</ p >
< svg viewBox = "0 0 820 600"
< 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 >
|
Output:
Share your thoughts in the comments
Please Login to comment...