The SVG FESpecularLighting.surfaceScale property returns the SVGAnimatedNumber object corresponding to the surfaceScale component of the FESpecularLighting.surfaceScale element.
Syntax:
var a = FESpecularLighting.surfaceScale
Return value: This property returns the SVGAnimatedNumber object corresponding to the surfaceScale component of the FESpecularLighting.surfaceScale element.
Example 1:
HTML
<!DOCTYPE html> < html >
< body >
< svg height = "200" width = "200" viewBox = "0 0 220 220" >
< filter id = "filter" >
< feSpecularLighting in = "BackgroundImage"
specularConstant = "0.8" surfaceScale = "1" specularExponent = "20" kernelUnitLength = "1" lighting-color = "red" id = "gfg" >
< fePointLight x = "100" y = "100" z = "220" />
</ feSpecularLighting >
< feComposite in = "SourceGraphic" in2 = "specOut" operator = "arithmetic" k1 = "0" k2 = "1" k3 = "1" k4 = "0" />
</ filter >
< rect x = "60" y = "60" width = "150" height = "150" style="stroke: #000000; fill: lightgreen;
filter: url(#filter);" />
< script type = "text/javascript" >
var g = document.getElementById("gfg");
console.log(g.surfaceScale);
console.log("surfaceScale value is : ",
g.surfaceScale.baseVal)
</ script >
</ svg >
</ body >
</ html >
|
Output:
Example 2:
HTML
<!DOCTYPE html> < html >
< body >
< svg height = "200" width = "200" >
< filter id = "filter" >
< feSpecularLighting specularExponent = "5"
lighting-color = "gold" result = "light" surfaceScale = "5" in = "SourceGraphic" id = "gfg" >
< fePointLight x = "100" y = "100" z = "100" />
</ feSpecularLighting >
< feComposite in = "SourceGraphic" in2 = "specOut" operator = "arithmetic" k1 = "1" k2 = "0" k3 = "1" k4 = "0" />
</ filter >
< rect x = "1" y = "1" width = "200" height = "200" style="stroke: #000000; fill: green;
filter: url(#filter);" />
< rect x = "50" y = "50" width = "100" height = "100" style="stroke: #000000; fill: green;
filter: url(#filter);" />
< g fill = "#FFFFFF" stroke = "black" font-size = "10" font-family = "Verdana" />
< text x = "60" y = "100" >GeeksForGeeks</ text >
< script type = "text/javascript" >
var g = document.getElementById("gfg");
console.log(g.surfaceScale);
console.log("surfaceScale value is : ",
g.surfaceScale.baseVal)
</ script >
</ svg >
</ body >
</ html >
|
Output:
Example 3:
HTML
<!DOCTYPE html> < html >
< body >
< svg height = "200" width = "200" viewBox = "0 0 220 220" >
< filter id = "filter" >
< feSpecularLighting specularExponent = "2"
lighting-color = "shadow" result = "light" surfaceScale = "6" in = "BackgroundImage" id = "gfg" >
< fePointLight x = "200" y = "200" z = "100" />
</ feSpecularLighting >
< feComposite in = "SourceGraphic" in2 = "specOut" operator = "arithmetic" k1 = "0" k2 = "1" k3 = "1" k4 = "0" />
</ filter >
< rect x = "40" y = "40" width = "200" height = "200" style="stroke: black; fill: green;
filter: url(#filter);" />
< circle cx = "130" cy = "130" r = "50" style = "fill: black; filter:url(#filter)" />
< script type = "text/javascript" >
var g = document.getElementById("gfg");
console.log(g.surfaceScale);
console.log("surfaceScale value is : ",
g.surfaceScale.baseVal)
</ script >
</ svg >
</ body >
</ html >
|
Output:
Supported Browsers:
- Google Chrome
- Edge
- Firefox
- Safari
- Opera
- Internet Explorer