Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

SVG CircleElement.r Property

  • Last Updated : 25 Oct, 2020

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

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!