Skip to content
Related Articles

Related Articles

Improve Article

SVG FEGaussionBlur.in1 Property

  • Last Updated : 14 Dec, 2020

The SVG FEGaussionBlur.in1 property returns the SVGAnimatedString object corresponding to the in1 component of the FEGaussionBlur.in1 element.

Syntax:

var a = FEGaussionBlur.in1

Return value: This property returns the SVGAnimatedString object corresponding to the in1 component of the FEGaussionBlur.in1 element.

Example 1: 

HTML




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

Output:



Example 2: 

HTML




<!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.in1);
  
            console.log("in1 value is : ", g.in1.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 HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :