The SVG FESpotLightElement.limitingConeAngle property returns the SVGAnimatedNumber object corresponding to the limitingConeAngle attribute of the FESpotLightElement.limitingConeAngle element.
Syntax:
var a = FESpotLightElement.limitingConeAngle
Return value: This property returns the SVGAnimatedNumber object corresponding to the limitingConeAngle attribute of the FESpotLightElement.limitingConeAngle element.
Example 1:
<!DOCTYPE html> < html >
< body >
< svg width = "200" height = "200" >
< defs >
< filter id = "spotlight" >
< feSpecularLighting result = "spec3" in = "blur3" specularConstant = "1.2" lighting-color = "#FFF" >
< feSpotLight x = "400" y = "400" z = "900"
limitingConeAngle = "9" specularExponent = "10" id = "gfg" />
</ feSpecularLighting >
< feComposite in = "SourceGraphic" in2 = "spotlight" operator = "out" k1 = "0" k2 = "1" k3 = "1" k4 = "0" />
</ filter >
</ defs >
< rect x = "40" y = "40" width = "150" height = "100" style="stroke: #000000;
fill: green;
filter: url(#spotlight);"/>
< g fill = "#FFFFFF" stroke = "black" font-size = "10" font-family = "Verdana" />
< text x = "50" y = "90" >GeeksForGeeks</ text >
< script type = "text/javascript" >
var g = document.getElementById("gfg");
console.log(g.limitingConeAngle);
console.log("limitingConeAngle value "
+ "of feSpotLight element is :"
+ g.limitingConeAngle.baseVal)
</ script >
</ svg >
</ body >
</ html >
|
Output:
Example 2:
<!DOCTYPE html> < html >
< body >
< svg width = "200" height = "200" >
< defs >
< filter id = "FillPaint" >
< feSpecularLighting result = "spec3" in = "blur3" specularConstant = "1.2" lighting-color = "#FFF" >
< feSpotLight x = "600" y = "600" z = "1200" pointAtX = "400" pointAtY = "400" pointAtZ = "400"
specularExponent = "7" limitingConeAngle = "9" id = "gfg" />
</ feSpecularLighting >
< feComposite in = "SourceGraphic" in2 = "spotlight" operator = "out" k1 = "0" k2 = "1" k3 = "1" k4 = "0" />
</ filter >
</ defs >
< rect x = "10" y = "10" width = "198" height = "118" style="stroke: #000000;
fill: black;
filter: url(#FillPaint);" />
< circle cx = "110" cy = "70" r = "60" stroke = "darkgreen" stroke-width = "3" fill = "Lightgreen"
style = "stroke: filter: url(#FillPaint);" />
< g fill = "#FFFFFF" stroke = "Green" font-size = "10" font-family = "Verdana" />
< text x = "60" y = "62" >GeeksForGeeks</ text >
< script type = "text/javascript" >
var g = document.getElementById("gfg");
console.log(g.limitingConeAngle);
console.log("limitingConeAngle value "
+ "of feSpotLight element is : "
+ g.limitingConeAngle.baseVal)
</ script >
</ svg >
</ body >
</ html >
|
Output:
Supported Browsers:
- Google Chrome
- Edge
- Firefox
- Safari
- Opera
- Internet Explorer