Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

SVG SpecularLighting.specularExponent Property

  • Last Updated : 14 Dec, 2020

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

Syntax:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!