Open In App

SVG FESpotLightElement.x Property

Last Updated : 30 Mar, 2022
Summarize
Comments
Improve
Suggest changes
Like Article
Like
Save
Share
Report
News Follow

The SVG FESpotLightElement.x property returns the SVGAnimatedNumber object corresponding to the x attribute of the FESpotLightElement.x element.

Syntax:

var a = FESpotLightElement.x

Return value: This property returns the SVGAnimatedNumber object corresponding to the x attribute of the FESpotLightElement.x element.

Example 1: 

HTML




<!DOCTYPE html>
<html>
  
<body>
    <svg width="200" height="200">
        <defs>
            <filter id="spotlight">
                <feSpecularLighting result="spec3" 
                    in="blur3" specularConstant="1.2" 
                    specularExponent="7"
                    lighting-color="#FFF">
  
                    <feSpotLight x="400" y="400" 
                        z="900" limitingConeAngle="9" 
                        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="100" 
            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.x);
  
            console.log("x value of feSpotLight "
                + "element is : " + g.x.baseVal)
        </script>
    </svg>
</body>
  
</html> 






                        










Output:




Example 2: 




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html> 


  


<body> 


    <svg width="200" height="200"> 


        <defs> 


            <filter id="FillPaint"> 


                <feSpecularLighting result="spec3"


                    in="blur3" specularConstant="1.2" 


                    specularExponent="7"


                    lighting-color="#FFF"> 


  


                    <feSpotLight x="600" y="600" 


                        z="1200" pointAtX="400" 


                        pointAtY="400" pointAtZ="400"


                        limitingConeAngle="9" id="gfg" /> 


                </feSpecularLighting> 


  


                <feComposite in="SourceGraphic" 


                    in2="spotlight" operator="out" 


                    k1="0" k2="1" k3="1" k4="0" /> 


            </filter> 


        </defs> 


  


        <rect x="1" y="1" width="198" height="118" 


            style="stroke: #000000; fill: black;  


                  filter: url(#FillPaint);" /> 


  


        <circle cx="100" cy="60" r="55" 


            stroke="darkgreen" stroke-width="3" 


            fill="Lightgreen"


            style="stroke: filter: url(#FillPaint);" /> 


  


        <g fill="#FFFFFF" stroke="Green" 


            font-size="10" c font-family="Verdana" /> 


  


        <text x="60" y="62">GeeksForGeeks</text> 


        <script type="text/javascript"> 


            var g = document.getElementById("gfg"); 


            console.log(g.x); 


            console.log("x value of feSpotLight " 


                + "element is : " + g.x.animVal) 


        </script> 


    </svg> 


</body> 


  


</html> 



















                        







                        










Output:




Supported Browsers:


    

  • Google Chrome
    • 

  • Edge
    • 

  • Firefox
    • 

  • Safari
    • 

  • Opera
    • 






                                    


                                                                          

                                        

                                                                              

                                                                

                            

                                                              

                                    
                                        Next Article
                                        
                                    
                                    
                                    

                                        SVG FESpotLightElement.y Property
                                    

                                

                                                        

                            

                                        

                                            

                                                

                                                

                                                    
author
        

            
        

        

                                                

                                                

                                                    taran910                                                

                                                

                                                

            
                                            

                                            
                                        

                                        

                                            

                                                
                                                    News
                                                
                                            
 
                                            

                                                
                                                
                                            

                                            

                                            Improve
                                                
                                            

                                        

                                    

                        

                                                

                        
                                                 

                                
Similar Reads

                                

                                    
        
            

                
SVG FESpotLightElement.y Property

                
The SVG FESpotLightElement.y property returns the SVGAnimatedNumber object corresponding to the y attribute of the FESpotLightElement.y element. Syntax: var a = FESpotLightElement.y Return value: This property returns the SVGAnimatedNumber object corresponding to the y attribute of the FESpotLightElement.y element. Example 1: C/C++ Code <!DOCTYP

            

            
            

                
                2 min read
            

        
    
        
            

                
SVG FESpotLightElement.z Property

                
The SVG FESpotLightElement.z property returns the SVGAnimatedNumber object corresponding to the z attribute of the FESpotLightElement.z element. Syntax: var a = FESpotLightElement.z Return value: This property returns the SVGAnimatedNumber object corresponding to the z attribute of the FESpotLightElement.z element. Example 1: C/C++ Code <!DOCTYP

            

            
            

                
                2 min read
            

        
    
        
            

                
SVG FESpotLightElement.limitingConeAngle Property

                
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

            

            
            

                
                2 min read
            

        
    

        
            

                
SVG FESpotLightElement.pointsAtY Property

                
The SVG FESpotLightElement.pointsAtY property returns the SVGAnimatedNumber object corresponding to the pointsAtY attribute of the FESpotLightElement.pointsAtY element. Syntax: var a = FESpotLightElement.pointsAtY Return value: This property returns the SVGAnimatedNumber object corresponding to the pointsAtY attribute of the FESpotLightElement.poin

            

            
            

                
                1 min read
            

        
    
        
            

                
SVG FESpotLightElement.pointsAtX Property

                
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.poin

            

            
            

                
                1 min read
            

        
    
        
            

                
SVG FESpotLightElement.pointsAtZ Property

                
The SVG FESpotLightElement.pointsAtZ property returns the SVGAnimatedNumber object corresponding to the pointsAtZ attribute of the FESpotLightElement.pointsAtZ element. Syntax: var a = FESpotLightElement.pointsAtZ Return value: This property returns the SVGAnimatedNumber object corresponding to the pointsAtZ attribute of the FESpotLightElement.poin

            

            
            

                
                1 min read
            

        
    
        
            

                
SVG  <svg> Element

                
SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. SVG graphics are supported by the <svg> element in HTML. SVG graphics feature a container in which we can create a variety of shapes such as boxes, pathways, text, graphic images, and circles. Syntax: <svg width="x" height="y"> sh

            

            
            

                
                2 min read
            

        
    

        
            

                
SVG ScriptElement.type Property

                
The SVG ScriptElement.type property returns an SVGAnimatedLength object corresponding to the attribute of the given script element. Syntax: ScriptElement.type Return value: This property returns SVGAnimatedLength object that can be used to get the type of the script element. Example 1: C/C++ Code <!DOCTYPE html> <html> <body> <

            

            
            

                
                1 min read
            

        
    
        
            

                
SVG RectElement.width Property

                
The SVG RectElement.width property returns an SVGAnimatedLength corresponding to the attribute of the given rectangle element. Syntax: RectElement.width Return Values: This property returns SVGAnimatedLength object that can be used get the width of the rect element Example 1: C/C++ Code <!DOCTYPE html> <html> <body> <svg width=

            

            
            

                
                1 min read
            

        
    
        
            

                
SVG RectElement.ry Property

                
The SVG RectElement.ry property is used to return an SVGAnimatedLength object corresponding to the attribute of the given rectangle element. Syntax: RectElement.ry Return Value: This property returns an SVGAnimatedLength object that can be used to get the "ry" value and other properties of the rectangle element. Example 1: C/C++ Code <!DOCTYPE h

            

            
            

                
                1 min read
            

        
    
        
            

                
SVG LineElement.x2 Property

                
The SVG LineElement.x2 property is used to return an SVGAnimatedLength object corresponding to the attribute of the given line element. Syntax: LineElement.x2 Return Value: This property returns an SVGAnimatedLength object that can be used to get the "x2" value and other properties of the line element. Example 1: C/C++ Code <!DOCTYPE html>

            

            
            

                
                1 min read
            

        
    
        
            

                
SVG namespaceURI Property

                
The SVG namespaceURI property returns namespaceURI of the given Attribute element. Syntax: namespace = attribute.namespaceURI Return value: This property returns the namespaceURI of the Attr. Example 1: C/C++ Code <!DOCTYPE html> <html> <body> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">

            

            
            

                
                1 min read
            

        
    
        
            

                
SVG FEDisplacementMap.yChannelSelector Property

                
The SVG FEDisplacementMap.yChannelSelector property returns the SVGAnimatedEnumeration object corresponding to the yChannelSelector component of the FEDisplacementMap.yChannelSelector element. Syntax: var a = FEDisplacementMap.yChannelSelector Return value: This property returns the SVGAnimatedEnumeration object corresponding to the yChannelSelecto

            

            
            

                
                1 min read
            

        
    
        
            

                
SVG Document.head Property

                
The SVG Document.head property returns an object which contains the information about the head of the document. Syntax: var objRef = document.head Return value: This property returns an object which contains the information about the head of the document. Example 1: C/C++ Code <!DOCTYPE html> <html> <head> <title>Title</t

            

            
            

                
                1 min read
            

        
    
        
            

                
SVG Document.hidden Property

                
The SVG Document.hidden property returns the boolean value for the check if the page is hidden or not. Syntax: var boolean = document.hidden Return value: This property returns the boolean value if the page is hidden or not. Example: C/C++ Code <!DOCTYPE html> <html> <body> <svg width="350" height="500" xmln

            

            
            

                
                1 min read
            

        
    
        
            

                
SVG RectElement.height Property

                
The SVG RectElement.height property returns an SVGAnimatedLength with respect to the rect element of SVG element of the HTML web page. Syntax: RectElement.height Return Values: This property returns SVGAnimatedLength object that can be used to get the "height" of the rect element Example 1: C/C++ Code <!DOCTYPE html> <html> <body>

            

            
            

                
                1 min read
            

        
    
        
            

                
SVG RectElement.rx Property

                
The SVG RectElement.rx property is used to return an SVGAnimatedLength object corresponding to the attribute of the given rectangle element. Syntax: RectElement.rx Return Values: This property returns an SVGAnimatedLength object that can be used to get the "rx" value and other properties of the rectangle element. Example 1: C/C++ Code <!DOCTYPE

            

            
            

                
                1 min read
            

        
    
        
            

                
SVG CircleElement.r Property

                
SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The SVG CircleElement r property returns an SVGAnimatedLength object corresponding to the attribute of the given line element Syntax: CircleElement.r Return value: This property returns SVGAnimatedLength object that can be used get the r of t

            

            
            

                
                1 min read
            

        
    
        
            

                
SVG CircleElement.cy Property

                
The SVG CircleElement.cy property returns an SVGAnimatedLength object corresponding to the attribute of the given line element. Syntax: CircleElement.cy Return value: This property returns SVGAnimatedLength object that can be used get the cy of the circle element Example 1: C/C++ Code <!DOCTYPE html> <html> <body> <svg xmlns=

            

            
            

                
                1 min read
            

        
    
        
            

                
SVG CircleElement.cx Property

                
The SVG CircleElement.cx property returns an SVGAnimatedLength object corresponding to the attribute of the given line element. Syntax: CircleElement.cx Return value: This property returns the SVGAnimatedLength object that can be used get the cx of the circle element. Example 1: <!DOCTYPE html> <html> <body> <svg xmlns="ht

            

            
            

                
                1 min read
            

        
    
        
            

                
SVG EllipseElement.cx Property

                
The SVG EllipseElement.cx property returns an SVGAnimatedLength object corresponding to the attribute of the given ellipse element Syntax: EllipseElement.cx Return value: This property returns SVGAnimatedLength object that can be used get the cx of the Ellipse element Example 1: C/C++ Code <!DOCTYPE html> <html> <body> <svg wid

            

            
            

                
                1 min read
            

        
    
        
            

                
SVG LineElement.x1 Property

                
The SVG LineElement.x1 property returns an SVGAnimatedLength object corresponding to the attribute of the given line element. Syntax: LineElement.x1 Return value: This property returns SVGAnimatedLength object that can be used to get the "x1" of the line element. Example 1: C/C++ Code <!DOCTYPE html> <html> <body> <svg width=

            

            
            

                
                1 min read
            

        
    
        
            

                
SVG EllipseElement.rx Property

                
The SVG EllipseElement.rx property Returns an SVGAnimatedLength object corresponding to the attribute of the given ellipse element Syntax: EllipseElement.rx Return value: This property returns SVGAnimatedLength object that can be used get the rx of the Ellipse element Example 1: <!DOCTYPE html> <html> <body> <svg width="30

            

            
            

                
                1 min read
            

        
    
        
            

                
SVG EllipseElement.ry Property

                
The SVG EllipseElement.ry property Returns an SVGAnimatedLength object corresponding to the attribute of the given ellipse element Syntax: EllipseElement.ry Return value: This property returns SVGAnimatedLength object that can be used get the ry of the Ellipse element Example 1: <!DOCTYPE html> <html> <body> <svg width="30

            

            
            

                
                1 min read
            

        
    
        
            

                
SVG EllipseElement.cy Property

                
The SVG EllipseElement.cy property Returns an SVGAnimatedLength object corresponding to the attribute of the given ellipse element Syntax: EllipseElement.cy Return value: This property returns SVGAnimatedLength object that can be used get the cy of the Ellipse element Example 1: <!DOCTYPE html> <html> <body> <svg width="30

            

            
            

                
                1 min read
            

        
    
        
            

                
SVG LineElement.y2 Property

                
The SVG LineElement.y2 property returns an SVGAnimatedLength object corresponding to the attribute of the given line element Syntax: LineElement.y2 Return value: This property returns SVGAnimatedLength object that can be used to get the y2 of the line element Example 1: C/C++ Code <!DOCTYPE html> <html> <body> <svg width="

            

            
            

                
                1 min read
            

        
    
        
            

                
SVG LineElement.y1 Property

                
The SVG LineElement.y1 property returns an SVGAnimatedLength object corresponding to the attribute of the given line element Syntax: LineElement.y1 Return value: This property returns SVGAnimatedLength object that can be used to get the y1 of the line element Example 1: C/C++ Code <!DOCTYPE html> <html> <body> <svg width="

            

            
            

                
                1 min read
            

        
    
        
            

                
SVG TextPathElement.startOffset Property

                
The SVG TextPathElement.startOffset property returns an SVGAnimatedLength object corresponding to the attribute of the given textpath element. Syntax: TextPathElement.startOffset Return value: This property returns SVGAnimatedLength object that can be used to get the startOffset of the TextPath element. Example 1: C/C++ Code <!DOCTYPE html>

            

            
            

                
                1 min read
            

        
    
        
            

                
SVG RectElement.y Property

                
The SVG RectElement.y property returns an SVGAnimatedLength corresponding to the attribute of the given rectangle element. Syntax: RectElement.y Return Values: This property returns SVGAnimatedLength object that can be used get the y-axis of the rect element. Example 1: C/C++ Code <!DOCTYPE html> <html> <body> <svg width="

            

            
            

                
                1 min read
            

        
    
        
            

                
SVG UseElement.width Property

                
The SVG UseElement.width property Returns an SVGAnimatedLength object corresponding to the attribute of the given use element. Syntax: UseElement.width Return value: This property returns SVGAnimatedLength object that can be used get the width the use element. Example 1: C/C++ Code <!DOCTYPE html> <html> <body> <svg width=

            

            
            

                
                1 min read
            

        
                                    

                            

                        

                        

                                                            

                                    
Article Tags : 

                                    
                                                                    

                                                                                

                                                

                                

                                    
                                                                    

                            


                        

                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

                

        

            

                

                    

                    
                
 
                
                            

                                

                            


                            


            

        
  

        

                




	

	
	

	
	

	
	
    

	
	

	
	



                
        

    

    

        

            

            

        

    















	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox
   








        
        
    







  

















        
        
    


    



   
   
  
  









    

          翻译：