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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...