Open In App

SVG RectElement.y Property

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

The SVG RectElement.y property returns an SVGAnimatedLength corresponding to the attribute of the given rectangle element.

Syntax:

RectElement.y

Return Values: This property returns SVGAnimatedLength object that can be used get the y-axis of the rect element.

Example 1: 

HTML




<!DOCTYPE html> 
<html
  
<body
    <svg width="350" height="150" 
        xmlns="http://www.w3.org/2000/svg">
        <rect width="100" height='100' 
            fill="green" id="gfg" x=20 y=30 />
  
        <script>
            var g = document.getElementById("gfg");
            console.log(g.y)
        </script>
    </svg>
</body
  
</html>


Output:

Example 2: 

HTML




<!DOCTYPE html> 
<html
  
<body
    <svg width="350" height="150" 
        xmlns="http://www.w3.org/2000/svg">
  
        <rect width="100" height='100' 
            fill="green" id="gfg" x=20 y=40 />
  
        <div id="abc"></div>
  
        <script>
            var g = document.getElementById("gfg");
            var abc = document.getElementById("abc");
            abc.innerHTML = 
                "y attribute of rect element is: "
                + g.y.baseVal.value;
        </script>
    </svg>
</body
  
</html>


Output:



Previous Article
Next Article

Similar Reads

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 RectElement.height Property
The SVG RectElement.height property returns an SVGAnimatedLength with respect to the rect element of SVG element of the HTML web page. Syntax: RectElement.height Return Values: This property returns SVGAnimatedLength object that can be used to get the "height" of the rect element Example 1: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt;
1 min read
SVG RectElement.rx Property
The SVG RectElement.rx property is used to return an SVGAnimatedLength object corresponding to the attribute of the given rectangle element. Syntax: RectElement.rx Return Values: This property returns an SVGAnimatedLength object that can be used to get the "rx" value and other properties of the rectangle element. Example 1: C/C++ Code &lt;!DOCTYPE
1 min read
SVG RectElement.x Property
The SVG RectElement.x property returns an SVGAnimatedLength corresponding to the attribute of the given rectangle element Syntax: RectElement.x Return Values: This property returns SVGAnimatedLength object that can be used get the x-axis of the rect element Example 1: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;svg width=&quot;35
1 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 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
SVG namespaceURI Property
The SVG namespaceURI property returns namespaceURI of the given Attribute element. Syntax: namespace = attribute.namespaceURI Return value: This property returns the namespaceURI of the Attr. Example 1: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;svg viewBox=&quot;0 0 100 100&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
1 min read
SVG FEDisplacementMap.yChannelSelector Property
The SVG FEDisplacementMap.yChannelSelector property returns the SVGAnimatedEnumeration object corresponding to the yChannelSelector component of the FEDisplacementMap.yChannelSelector element. Syntax: var a = FEDisplacementMap.yChannelSelector Return value: This property returns the SVGAnimatedEnumeration object corresponding to the yChannelSelecto
1 min read