Open In App

SVG SpecularLighting.specularExponent Property

Last Updated : 30 Mar, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

The SVG SpecularLighting.specularExponent property returns the SVGAnimatedNumber object corresponding to the specularExponent component of the SpecularLighting.specularExponent element.

Syntax:

var a = FESpecularLighting.specularExponent 

Return value: This property returns the SVGAnimatedNumber object corresponding to the specularExponent component of the SpecularLighting.specularExponent element.

Example 1: 




<!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.specularExponent)
                console.log("specularExponent value is : ",
                    g.specularExponent.baseVal)
        </script>
    </svg> 
</body> 
  
</html>  






                        








Output:




Example 2: 











                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html>  


<html>  


  


<body>  


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


        <filter id="filter">  


  


            <feSpecularLighting specularExponent="5"


                lighting-color="gold" result="light"


                surfaceScale="5" in="SourceGraphic"


                specularConstant="1.3" 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.specularExponent) 


            console.log("specularExponent value is : ", 


               g.specularExponent.baseVal) 


        </script> 


    </svg>  


</body>  


  


</html>  



















                        







                        








Output:




Example 3: 











                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!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" 


                specularConstant="5" 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.specularExponent) 


                console.log("specularExponent value is : " 


               , g.specularExponent.baseVal) 


        </script> 


    </svg>  


</body>  


  


</html>  



















                        







                        








Output:




Supported Browsers:


    

  • Google Chrome
    • 

  • Edge
    • 

  • Firefox
    • 

  • Safari
    • 

  • Opera
    • 

  • Internet Explorer
    • 



                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        SVG Stroke Properties
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        SVG SpecularLighting.kernelUnitLengthY Property
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                SVG SpecularLighting.kernelUnitLengthY Property
            

        
    
        
            

                SVG  <svg> Element
            

        
    
        
            

                SVG ScriptElement.type Property
            

        
    
        
            

                SVG RectElement.width Property
            

        
    
        
            

                SVG RectElement.ry Property
            

        
    
        
            

                SVG LineElement.x2 Property
            

        
    
        
            

                SVG namespaceURI Property
            

        
    
        
            

                SVG FEDisplacementMap.yChannelSelector Property
            

        
    
        
            

                SVG Document.head Property
            

        
    
        
            

                SVG Document.hidden Property
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
author
        

            
        

        

                                    


                                    

                                        taran910                                

                            

                            

            
                                

                            

                                                                    

                                        
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