Related Articles

Related Articles

SVG r Attribute
  • Last Updated : 25 Oct, 2020

The r attribute defines the radius of the circle.

Syntax:

r="radius"

Attribute Values:

  • length: length at which we want to set the radius.
  • percentage: percentage at which we want to set the radius.

We will use the r attribute for setting the radius of the circle

Example1:



HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
  
<body
    <svg viewBox="0 0 300 200" 
        xmlns="http://www.w3.org/2000/svg">
  
        <circle cx="40" cy="40" r="25"/>
    </svg>
</body
  
</html>

chevron_right


output:

Example2:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 300 200" 
        xmlns="http://www.w3.org/2000/svg">
          
        <radialGradient r="50%" id="myGradient00">
            <stop offset="0" stop-color="white" />
            <stop offset="100%" stop-color="black" />
        </radialGradient>
  
        <rect x="5" y="5" width="60" height="60" 
            fill="url(#myGradient00)" />
    </svg>
</body>
  
</html>

chevron_right


output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :