The r attribute defines the radius of a circle.
You can use this attribute with the following SVG elements:
The r attribute defines the radius of a circle.
You can use this attribute with the following SVG elements:
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> <radialGradient r="0" id="myGradient000"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialGradient> <radialGradient r="50%" id="myGradient050"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialGradient> <radialGradient r="100%" id="myGradient100"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialGradient> <circle cx="50" cy="50" r="0" /> <circle cx="150" cy="50" r="25" /> <circle cx="250" cy="50" r="50" /> <rect x="20" y="120" width="60" height="60" fill="url(#myGradient000)" /> <rect x="120" y="120" width="60" height="60" fill="url(#myGradient050)" /> <rect x="220" y="120" width="60" height="60" fill="url(#myGradient100)" /> </svg>
For <circle>, r defines the radius of the circle and therefor its size. With a value lower or equal to zero the circle won't be drawn at all.
| Value | <length> | <percentage> |
|---|---|
| Default value | 0 |
| Animatable | Yes |
Note: Starting with SVG2, r is a Geometry Property meaning this attribute can also be used as a CSS property for circles.
For <radialGradient>, r defines the radius of the end circle for the radial gradient.
The gradient will be drawn such that the 100% gradient stop is mapped to the perimeter of this end circle. A value of lower or equal to zero will cause the area to be painted as a single color using the color and opacity of the last gradient <stop>.
| Value | <length> | <percentage> |
|---|---|
| Default value | 50% |
| Animatable | Yes |
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # R |
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementRAttribute |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/r