r
Ther attribute defines the radius of a circle.
You can use this attribute with the following SVG elements:
Percentages refer to the normalized diagonal of the current SVG viewport, which is calculated as.
Example
html,body,svg { height: 100%;}<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> <radialGradient r="0"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialGradient> <radialGradient r="50%"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialGradient> <radialGradient r="100%"> <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>circle
For<circle>,r defines the radius of the circle and therefore 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:The radius size of a<circle> can also be defined with thergeometry property.
radialGradient
For<radialGradient>,r defines the radius of the end circle for the radial gradient.
The gradient will be drawn such that the100% 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> |
|---|---|
| Default value | 50% |
| Animatable | Yes |
Specifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementRAttribute |
Browser compatibility
svg.elements.circle.r
svg.elements.radialGradient.r
See also
- CSS
rproperty