SVG RectElement.y Property

Last Updated : 30 Mar, 2022

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:

HTML Introduction

taran910

Improve

Article Tags :

SVG RectElement.y Property

Similar Reads

Basics

HTML Structure & Elements

HTML List

HTML Visuals & Media

HTML Layout & Design

HTML Projects& Advanced Topics

HTML Tutorial References

Thank You!

What kind of Experience do you want to share?