Open In App

SVG RectElement.x Property

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

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: 

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=20 />
              
        <script>
            var g = document.getElementById("gfg");
            console.log(g.x);
        </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=30 y=20 />
              
        <script>
            var g = document.getElementById("gfg");
            console.log(g.x)
        </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.y Property
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: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;svg width=&quot;
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