Open In App

SVG RectElement.width Property

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

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: 

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 />
              
        <script>
            var g = document.getElementById("gfg");
            console.log(g.width)
        </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="190" height='100' 
            fill="green" id="gfg" x=20 y=40 />
              
        <script>
            var g = document.getElementById("gfg");
            console.log(g.width)
        </script>
    </svg>
</body>
  
</html>


Output:



Previous Article
Next Article

Similar Reads

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 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
HTML width/height Attribute vs CSS width/height Property
In HTML 5, few elements follow the width and height attributes and maximum elements do not follow this attribute. Like img, iframe, canvas, and svg kind of elements follow the width and height attributes but div, span, article and section type of elements don't follow them.The width and height attributes are affected in img, svg tags, those are wea
3 min read
SVG UseElement.width Property
The SVG UseElement.width property Returns an SVGAnimatedLength object corresponding to the attribute of the given use element. Syntax: UseElement.width Return value: This property returns SVGAnimatedLength object that can be used get the width the use element. Example 1: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;svg width=
1 min read
Difference Between css(‘width’) and width() methods In jQuery
In jQuery, we have two ways to change the width of any HTML element. The jQuery css() method and width() method, below both the methods are described properly with the example. jQuery CSS('width') Method: It is a method present in jQuery which is used to get or set the property on the matched element. It is a property used to get or set the width o
3 min read
How to add Background-Color for Text Width Instead of Entire Element Width using CSS ?
In this article, we will see how to add background color for the text width instead of the entire element width using CSS. The display: inline or display: inline-block property is used to set the background color of the text width. Syntax: display: inline; display: inline-block; Approach: We will create an element and then apply the display: inline
2 min read
How to make a grid with two columns where 1st column has 20% of width and 2nd one 80% width in Tailwind CSS ?
Tailwind CSS simplifies the process of making complex UI designs. It has a lot of predefined styles in form of classes, which can be applied to any HTML element in the code. Also, one advantage of Tailwind CSS is that during the production build, it analyzes the HTML components, and removes any unused CSS, hence decreasing the overall size of the C
4 min read