r
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
The r
CSS property defines the radius of a circle. It can only be used with the SVG <circle>
element. If present, it overrides the circle's r
attribute.
Syntax
/* Length and percentage values */
r: 3px;
r: 20%;
/* Global values */
r: inherit;
r: initial;
r: revert;
r: revert-layer;
r: unset;
Values
The <length>
and <percentage>
values define the radius of the circle.
<length>
-
Absolute or relative lengths can be expressed in any unit allowed by the CSS
<length>
data type. Negative values are invalid. <percentage>
-
Percentages refer to the normalized diagonal of the current SVG viewport, which is calculated as .
Formal definition
Initial value | 0 |
---|---|
Applies to | <circle> element in <svg> |
Inherited | no |
Percentages | refer to the normalized diagonal of the current SVG viewport |
Computed value | the percentage as specified or the absolute length |
Animation type | by computed value type |
Formal syntax
r =
<length-percentage>
<length-percentage> =
<length> |
<percentage>
Examples
Defining the radius of a circle
In this example, we have two identical <circle>
elements in an SVG, each with a 10
radius and the same x- and y-axis coordinates for their center points.
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="10" />
<circle cx="50" cy="50" r="10" />
</svg>
With CSS, we style only the first circle, allowing the second circle to use default styles (with (fill
defaulting to black). We use the r
property to override the value of the SVG r
attribute, giving it a fill
and stroke
. The default size of an SVG is 300px
wide and 150px
tall.
svg {
border: 1px solid black;
}
circle:first-of-type {
r: 30px;
fill: lightgreen;
stroke: black;
}
ViewBox versus viewport pixels
This example contains two SVGs, each with two <circle>
elements. The second SVG includes a viewBox
attribute to demonstrate the difference between SVG viewBox and SVG viewports.
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="10" />
<circle cx="50" cy="50" r="10" />
</svg>
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="10" />
<circle cx="50" cy="50" r="10" />
</svg>
The CSS is similar to the previous example, with r: 30px
set, but we set a width
to ensure the images are both 300px
wide:
svg {
border: 1px solid black;
width: 300px;
}
circle:first-of-type {
r: 30px;
fill: lightgreen;
stroke: black;
}
Because the viewBox
attribute defines the SVG as 200 SVG coordinate system pixels wide, and the image is scaled up to 300px
, the 30
SVG coordinate pixels are scaled to be rendered as 45
CSS pixels.
Defining the radius of a circle using percentages
In this example, we use the same markup as the previous example. The only difference is the r
value; in this case, we use a percentage value.
svg {
border: 1px solid black;
width: 300px;
}
circle:first-of-type {
r: 30%;
fill: lightgreen;
stroke: black;
}
In both cases, the circle radius is 30%
of the normalized diagonal of the SVG viewport. The radius r
is equal to . While the first image is using 300
and 150
CSS pixels and the second is using 200
and 100
SVG view box units, 30% is a proportional value. As a result, the r
value is the same: 47.43
viewBox units, which resolves to 71.15
CSS pixels.
While the r
is the same, the center points differ because the second SVG is scaled up by 50%, pushing its center down and to the right by 50%.
Specifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # R |
Browser compatibility
BCD tables only load in the browser
See also
- Geometry properties:
r
,cx
,cy
,rx
,ry
,x
,y
,width
,height
fill
stroke
paint-order
border-radius
shorthand propertyradial-gradient
<basic-shape>
data type- SVG
r
attribute