The SVG FESpotLightElement.pointsAtX property returns the SVGAnimatedNumber object corresponding to the pointsAtX attribute of the FESpotLightElement.pointsAtX element.
Syntax:
var a = FESpotLightElement.pointsAtX
Return value: This property returns the SVGAnimatedNumber object corresponding to the pointsAtX attribute of the FESpotLightElement.pointsAtX element.
Example 1:
HTML
<!DOCTYPE html> < html >
< body >
< div style = "color: green;" >
< h1 >
GeeksforGeeks
</ h1 >
< svg viewBox = "0 0 1120 350"
< filter id = "Geek" width = "100%"
height = "100%" >
< feDiffuseLighting in = "SourceGraphic" >
< feSpotLight x = "120" y = "120"
z = "50" pointsAtZ = "5" pointsAtX = "5" pointsAtY = "5" id = "Geek2" />
</ feDiffuseLighting >
</ filter >
< rect width = "300" height = "300"
style = "filter: url(#Geek);" />
< text x = "50" y = "60" >GeeksForGeeks</ text >
< script type = "text/javascript" >
var g = document.getElementById("Geek2");
console.log(g.pointsAtX);
console.log("pointAtX value of feSpotLight "+
"element is : "+g.pointsAtX.baseVal)
</ script >
</ svg >
</ div >
</ body >
</ html >
|
Output:
Example 2:
HTML
<!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" pointsAtZ = "5" pointsAtX = "5" pointsAtY = "5" 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.pointsAtX);
console.log("pointsAtX value of feSpotLight "+
"element is : "+g.pointsAtX.baseVal)
</ script >
</ svg >
</ body >
</ html >
|
Output:
Supported Browsers:
- Google Chrome
- Edge
- Firefox
- Safari
- Opera
- Internet Explorer