Open In App

SVG FEOffset.dy Property

Improve
Improve
Like Article
Like
Save
Share
Report

The SVG FEOffset.dy property returns the SVGAnimatedNumber object corresponding to the dy component of the FEOffset element.

Syntax:

let offset_prop = FEOffset.dy

Return value: This property returns the SVGAnimatedNumber object corresponding to the dy component of the FEOffset element.

Example 1: 

HTML




<!DOCTYPE html>
<html>
  
<body>
    <svg width="400" height="400">
        <defs>
            <filter id="filter2" x="0" y="0" 
                width="150%" height="150%">
                  
                <feOffset result="offOut" 
                    dx="30" dy="30" 
                    in="SourceGraphic" id="gfg" />
  
                <feBlend in="SourceGraphic" 
                    in2="blurOut" mode="normal" />
            </filter>
        </defs>
  
        <g>
            <rect x="50" y="50" width="150" 
                height="150" stroke="black" 
                stroke-width="5" fill="gray"
                filter="url(#filter2)" />
        </g>
          
        <script type="text/javascript">
            let feoffset = document.getElementById("gfg");
            console.log(feoffset.dy)
            console.log("dy value is : ",
                feoffset.dy.baseVal)
        </script>
    </svg>
</body>
  
</html>


Output:

Example 2: 

HTML




<!DOCTYPE html>
<html>
  
<body>
    <svg width="400" height="400">
        <defs>
            <filter id="filter2" x="0" 
                y="0" width="150%" height="150%">
                  
                <feOffset result="offOut" dx="30" 
                dy="30" in="SourceGraphic" id="gfg" />
                  
                <feGaussianBlur in1="blurOut" 
                    in="offOut" stdDeviation="10" />
                  
                <feBlend in="SourceGraphic" 
                    in2="blurOut" mode="normal" />
            </filter>
        </defs>
        <g>
            <rect x="50" y="50" width="150" 
                height="150" fill="gray" 
                filter="url(#filter2)" />
        </g>
        <script type="text/javascript">
            let feoffset =
                document.getElementById("gfg");
            console.log(feoffset.dy)
            console.log("dy value is : ",
                feoffset.dy.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