Open In App

SVG FEDropShadow.dy Property

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

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

Syntax:

var a = FEDropShadow.dy

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

Example 1:

HTML




<!DOCTYPE html> 
<html
  
<body
    <svg width="200" height="200"
        <defs
            <filter id="drop_shadow"
                filterUnits="objectBoundingBox"
                x="-50%" y="-60%" width="250%"
                height="250%"
  
                <feDropShadow in="SourceGraphic"
                    dx="1" dy="1" stdDeviation="30"
                    flood-color="darkgreen" id="gfg"/> 
            </filter
        </defs
  
        <rect x="40" y="40" width="100" height="100"
            style="stroke: #000000; 
                fill: lightgreen; 
                filter: url(#drop_shadow);" /> 
  
        <g fill="#FFFFFF" stroke="black"
            font-size="10" font-family="Verdana"/> 
            <text x="50" y="90">GeeksForGeeks</text
  
        <script type="text/javascript">
            var g = document.getElementById("gfg");
            console.log(g.dy)
            console.log("dy value is : ",g.dy.baseVal)
        </script>
    </svg
</body
  
</html


Output:

Example 2: 

HTML




<!DOCTYPE html> 
<html
  
<body
    <svg width="200" height="200"
        <defs
            <filter id="blur"
                filterUnits="objectBoundingBox"
                x="-10%" y="-10%" width="300%"
                height="300%"
  
                <feDropShadow in="StrokePaint"
                    dx="1" dy="1" stdDeviation="30"
                    flood-color="darkgreen" id="gfg"/> 
            </filter
        </defs>
  
        <circle cx="110" cy="60" r="55"
            stroke="darkgreen" stroke-width="3"
            fill="Lightgreen"
            style="stroke: filter: url(#blur);" /> 
  
        <g fill="#FFFFFF" stroke="Green"
            font-size="10" c font-family="Verdana"/> 
            <text x="60" y="62">GeeksForGeeks</text
  
        <script type="text/javascript">
            var g = document.getElementById("gfg");
            console.log(g.dy)
            console.log("dy value is : ",g.dy.baseVal)
        </script>
    </svg
</body
  
</html


Output:

Supported Browsers:

  • Google Chrome
  • Edge
  • Firefox
  • Safari
  • Opera

Reference: https://developer.mozilla.org/en-US/docs/Web/API/SVGFEDropShadowElement



Previous Article
Next Article

Similar Reads

SVG FEDropShadow.stdDeviationY Property
The SVG FEDropShadow.stdDeviationY property returns the SVGAnimatedNumber object corresponding to the stdDeviationY component of the FEDisplacementMap.stdDeviationY element. Syntax: var a = FEDropShadow.stdDeviationY Return value: This property returns the SVGAnimatedNumber object corresponding to the stdDeviationY component of the FEDisplacementMa
1 min read
SVG FEDropShadow.stdDeviationX Property
The SVG FEDropShadow.stdDeviationX property returns the SVGAnimatedNumber object corresponding to the stdDeviationX component of the FEDisplacementMap.stdDeviationX element. Syntax: var a = FEDropShadow.stdDeviationX Return value: This property returns the SVGAnimatedNumber object corresponding to the stdDeviationX component of the FEDisplacementMa
1 min read
SVG FEDropShadow.dx Property
The SVG FEDropShadow.dx property returns the SVGAnimatedNumber object corresponding to the dx component of the FEDisplacementMap.dx element. Syntax: var a = FEDropShadow.dx Return value: This property returns the SVGAnimatedNumber object corresponding to the dx component of the FEDisplacementMap.dx element. Example 1: C/C++ Code &lt;!DOCTYPE html
1 min read
SVG FEDropShadow.in1 Property
The SVG FEDropShadow.in1 property returns the SVGAnimatedstring object corresponding to the in1 component of the FEDisplacementMap.in1 element. Syntax: var a = FEDropShadow.in1 Return value: This property returns the SVGAnimatedstring object corresponding to the in1 component of the FEDisplacementMap.in1 element. Example 1: C/C++ Code &lt;!DOCTYPE
1 min read
SVG &lt;feDropShadow&gt; Element
SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The &lt;feDropShadow&gt; element works in combination with other filter primitives to add a drop shadow to the graphic. It provides a blurred, colored, and optional offset layer behind the original input. Syntax: &lt;feDropShadow in="" dx=""
2 min read
SVG &lt;svg&gt; Element
SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. SVG graphics are supported by the &lt;svg&gt; element in HTML. SVG graphics feature a container in which we can create a variety of shapes such as boxes, pathways, text, graphic images, and circles. Syntax: &lt;svg width="x" height="y"&gt; sh
2 min read
SVG ScriptElement.type Property
The SVG ScriptElement.type property returns an SVGAnimatedLength object corresponding to the attribute of the given script element. Syntax: ScriptElement.type Return value: This property returns SVGAnimatedLength object that can be used to get the type of the script element. Example 1: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;
1 min read
SVG RectElement.width Property
The SVG RectElement.width property returns an SVGAnimatedLength corresponding to the attribute of the given rectangle element. Syntax: RectElement.width Return Values: This property returns SVGAnimatedLength object that can be used get the width of the rect element Example 1: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;svg width=
1 min read
SVG RectElement.ry Property
The SVG RectElement.ry property is used to return an SVGAnimatedLength object corresponding to the attribute of the given rectangle element. Syntax: RectElement.ry Return Value: This property returns an SVGAnimatedLength object that can be used to get the "ry" value and other properties of the rectangle element. Example 1: C/C++ Code &lt;!DOCTYPE h
1 min read
SVG LineElement.x2 Property
The SVG LineElement.x2 property is used to return an SVGAnimatedLength object corresponding to the attribute of the given line element. Syntax: LineElement.x2 Return Value: This property returns an SVGAnimatedLength object that can be used to get the "x2" value and other properties of the line element. Example 1: C/C++ Code &lt;!DOCTYPE html&gt;
1 min read