Skip to content
Related Articles

Related Articles

Improve Article

SVG FEGaussionBlur.stdDeviationX property

  • Last Updated : 01 Dec, 2020

The SVG FEGaussionBlur.stdDeviationX property returns the SVGAnimatedNumber object corresponding to the stdDeviationX component of the FEGaussionBlur.stdDeviationX element.

Syntax:

var a = FEGaussionBlur.stdDeviationX

Return value: This property returns the SVGAnimatedNumber object corresponding to the stdDeviationX component of the FEGaussionBlur.stdDeviationX element

Example 1: 




<!DOCTYPE html> 
<html
  
<body
    <svg viewBox="0 0 1000 1000"
        <filter id="lightMe2"
  
            <feGaussianBlur in="FillPaint"
                stdDeviation="10" edgeMode="wrap" id="gfg" /> 
  
            <feComposite in="SourceGraphic"
                in2="light" operator="arithmetic"
                k1="1" k2="0" k3="0" k4="0" /> 
  
        </filter
        <rect x="20" y="20" width="200"
            height="200" fill="green"
            style="filter: url(#lightMe2);" /> 
  
        <script type="text/javascript">
                var g = document.getElementById("gfg");
                console.log(g.stdDeviationX)
                console.log("stdDeviationX value is : "
      , g.stdDeviationX.baseVal)
        </script>
  
    </svg
</body
  
</html

Output:



Example 2: 




<!DOCTYPE html> 
<html
  
<body
    <svg viewBox="0 0 1000 1000"
        <filter id="lightMe3" x="-50"
            y="-40" width="200" height="150"
              
            <feOffset in="BackgroundImage"
                    dx="10" dy="10" /> 
  
            <feGaussianBlur in="offset2"
                    stdDeviation="3" id="gfg"/> 
  
            <feMerge
                <feMergeNode in="blur" /> 
                <feMergeNode in="SourceAlpha" /> 
            </feMerge
  
        </filter
        <rect x="20" y="20" width="200"
            height="200" fill="green"
            style="filter: url(#lightMe3);" /> 
  
        <script type="text/javascript">
                var g = document.getElementById("gfg");
                console.log(g.stdDeviationX)
                console.log("stdDeviationX value is : "
             , g.stdDeviationX.baseVal)
        </script>
  
    </svg
</body
  
</html

Output:

Supported Browsers:

  • Google Chrome
  • Edge
  • Firefox
  • Safari
  • Opera

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :