Open In App

SVG CircleElement.r Property

Last Updated : 30 Mar, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.

The SVG CircleElement r property returns an SVGAnimatedLength object corresponding to the attribute of the given line element

Syntax:

CircleElement.r

Return value: This property returns SVGAnimatedLength object that can be used get the r of the circle element

Example 1: 

HTML
<!DOCTYPE html>
<html>

<body>
    <svg xmlns="http://www.w3.org/2000/svg" 
        viewBox="0 0 250 250" width="250" 
        height="250">
        
        <circle cx="100" cy="100" r="50" 
            fill="green" id="gfg" 
            onclick="clickCircle();" />
            
        <script>
            var g = document.getElementById("gfg");
            console.log(g.r)
        </script>
    </svg>
</body>

</html>

Output:

Example 2: 

HTML
<!DOCTYPE html>
<html>

<body>
    <svg xmlns="http://www.w3.org/2000/svg" 
        viewBox="0 0 250 250" width="250" 
        height="250">
        
        <circle cx="100" cy="100" r="100" 
            fill="green" id="gfg" 
            onclick="clickCircle();" />
            
        <script>
            var g = document.getElementById("gfg");
            console.log(g.r)
        </script>
    </svg>
</body>

</html>

Output:


Similar Reads