Open In App

SVG FESpecularLighting.kernelUnitLengthX Property

Improve
Improve
Like Article
Like
Save
Share
Report

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

Syntax:

var a = FESpecularLighting.kernelUnitLengthX

Return value: This property returns the SVGAnimatedNumber object corresponding to the kernelUnitLengthX component of the FESpecularLighting.kernelUnitLengthX 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.kernelUnitLengthX)
                console.log("kernelUnitLengthX value is : ",
                    g.kernelUnitLengthX.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" 
                kernelUnitLength="3.2" 
                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.kernelUnitLengthX)
                console.log("kernelUnitLengthX value is : "
                 , g.kernelUnitLengthX.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" kernelUnitLength="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.kernelUnitLengthX)
                console.log("kernelUnitLengthX value is : ",
                    g.kernelUnitLengthX.baseVal)
        </script>
    </svg
</body
  
</html


Output:

Supported Browsers:

  • Google Chrome
  • Edge
  • Firefox
  • Safari
  • Opera
  • Internet Explorer


Last Updated : 30 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads