Open In App

SVG FEOffset.dx Property

Last Updated : 30 Mar, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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

Syntax:

var a = FEOffset.dx

Return value: This property returns the SVGAnimatedNumber object corresponding to the dx component of the FEOffset.dx 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">
            var g = document.getElementById("gfg");
            console.log(g.dx);
            console.log("dx value is : ", g.dx.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">
            var g = document.getElementById("gfg");
            console.log(g.dx);
            console.log("dx value is : ", g.
                dx.baseVal)
        </script>
    </svg>
</body>
  
</html>


Output:

Supported Browsers:

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


Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads