The r attribute defines the radius of a circle.
Two elements are using this attribute: <circle>, and <radialGradient>
<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 | Status | Comment |
|---|---|---|
| Scalable Vector Graphics (SVG) 2 The definition of 'r' in that specification. | Candidate Recommendation | Definition as a geometry property |
| Scalable Vector Graphics (SVG) 2 The definition of 'r' in that specification. | Candidate Recommendation | Definition for SVG2 paint servers <radialGradient>
|
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'r' in that specification. | Recommendation | Initial definition for <radialGradient>
|
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'r' in that specification. | Recommendation | Initial definition for <circle>
|
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/r