-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
131 lines (110 loc) · 3.33 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
---
title: r
slug: Web/SVG/Attribute/r
page-type: svg-attribute
spec-urls:
- https://svgwg.org/svg2-draft/geometry.html#R
- https://svgwg.org/svg2-draft/pservers.html#RadialGradientElementRAttribute
---
{{SVGRef}}
The **`r`** attribute defines the radius of a circle.
You can use this attribute with the following SVG elements:
- {{SVGElement("circle")}}
- {{SVGElement("radialGradient")}}
When the value is set as a percentage, it refers to the normalized diagonal of the current SVG viewport.
## Example
```css hidden
html,
body,
svg {
height: 100%;
}
```
```html
<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>
```
{{EmbedLiveSample("Example", '100%', 200)}}
## circle
For {{SVGElement('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.
<table class="properties">
<tbody>
<tr>
<th scope="row">Value</th>
<td>
<strong
><a href="/en-US/docs/Web/SVG/Content_type#length"
><length></a
></strong
>
|
<strong
><a href="/en-US/docs/Web/SVG/Content_type#percentage"
><percentage></a
></strong
>
</td>
</tr>
<tr>
<th scope="row">Default value</th>
<td><code>0</code></td>
</tr>
<tr>
<th scope="row">Animatable</th>
<td>Yes</td>
</tr>
</tbody>
</table>
> [!NOTE]
> The radius size of a `<circle>` can also be defined with the {{cssxref("r")}} _geometry property_.
## radialGradient
For {{ SVGElement("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 {{ SVGElement("stop") }}.
<table class="properties">
<tbody>
<tr>
<th scope="row">Value</th>
<td>
<strong
><a href="/en-US/docs/Web/SVG/Content_type#length"
><length></a
></strong
>
|
<strong
><a href="/en-US/docs/Web/SVG/Content_type#percentage"
><percentage></a
></strong
>
</td>
</tr>
<tr>
<th scope="row">Default value</th>
<td><code>50%</code></td>
</tr>
<tr>
<th scope="row">Animatable</th>
<td>Yes</td>
</tr>
</tbody>
</table>
## Specifications
{{Specifications}}