-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
271 lines (240 loc) · 7.49 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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
---
title: viewBox
slug: Web/SVG/Attribute/viewBox
page-type: svg-attribute
spec-urls: https://svgwg.org/svg2-draft/coords.html#ViewBoxAttribute
---
{{SVGRef}}
The **`viewBox`** attribute defines the position and dimension, in user space, of an SVG viewport.
The value of the `viewBox` attribute is a list of four numbers separated by whitespace and/or a comma: `min-x`, `min-y`, `width`, and `height`. `min-x` and `min-y` represent the smallest X and Y coordinates that the `viewBox` may have (the origin coordinates of the `viewBox`) and the `width` and `height` specify the `viewBox` size. The resulting `viewBox` is a rectangle in user space mapped to the bounds of the viewport of an SVG element (not the [browser viewport](/en-US/docs/Glossary/Viewport)).
When an SVG contains a `viewBox` attribute (often in combination with a [`preserveAspectRatio`](/en-US/docs/Web/SVG/Attribute/preserveAspectRatio) attribute), a transform stretches or resizes the SVG viewport to fit a particular container element.
## Elements
You can use this attribute with the SVG elements described in the sections below.
### `<marker>`
For {{SVGElement('marker')}}, `viewBox` defines the position and dimension for the content of the `<marker>` element.
<table class="properties">
<tbody>
<tr>
<th scope="row">Value</th>
<td>
<strong
><a href="/en-US/docs/Web/SVG/Content_type#number"
><number></a
></strong
>,?
<strong
><a href="/en-US/docs/Web/SVG/Content_type#number"
><number></a
></strong
>,?
<strong
><a href="/en-US/docs/Web/SVG/Content_type#number"
><number></a
></strong
>,?
<strong
><a href="/en-US/docs/Web/SVG/Content_type#number"
><number></a
></strong
>
</td>
</tr>
<tr>
<th scope="row">Default value</th>
<td><em>none</em></td>
</tr>
<tr>
<th scope="row">Animatable</th>
<td>Yes</td>
</tr>
</tbody>
</table>
### `<pattern>`
For {{SVGElement('pattern')}}, `viewBox` defines the position and dimension for the content of the pattern tile.
<table class="properties">
<tbody>
<tr>
<th scope="row">Value</th>
<td>
<strong
><a href="/en-US/docs/Web/SVG/Content_type#number"
><number></a
></strong
>,?
<strong
><a href="/en-US/docs/Web/SVG/Content_type#number"
><number></a
></strong
>,?
<strong
><a href="/en-US/docs/Web/SVG/Content_type#number"
><number></a
></strong
>,?
<strong
><a href="/en-US/docs/Web/SVG/Content_type#number"
><number></a
></strong
>
</td>
</tr>
<tr>
<th scope="row">Default value</th>
<td><em>none</em></td>
</tr>
<tr>
<th scope="row">Animatable</th>
<td>Yes</td>
</tr>
</tbody>
</table>
### `<svg>`
For {{SVGElement('svg')}}, `viewBox` defines the position and dimension for the content of the `<svg>` element.
<table class="properties">
<tbody>
<tr>
<th scope="row">Value</th>
<td>
<strong
><a href="/en-US/docs/Web/SVG/Content_type#number"
><number></a
></strong
>,?
<strong
><a href="/en-US/docs/Web/SVG/Content_type#number"
><number></a
></strong
>,?
<strong
><a href="/en-US/docs/Web/SVG/Content_type#number"
><number></a
></strong
>,?
<strong
><a href="/en-US/docs/Web/SVG/Content_type#number"
><number></a
></strong
>
</td>
</tr>
<tr>
<th scope="row">Default value</th>
<td><em>none</em></td>
</tr>
<tr>
<th scope="row">Animatable</th>
<td>Yes</td>
</tr>
</tbody>
</table>
### `<symbol>`
For {{SVGElement('symbol')}}, `viewBox` defines the position and dimension for the content of the `<symbol>` element.
<table class="properties">
<tbody>
<tr>
<th scope="row">Value</th>
<td>
<strong
><a href="/en-US/docs/Web/SVG/Content_type#number"
><number></a
></strong
>,?
<strong
><a href="/en-US/docs/Web/SVG/Content_type#number"
><number></a
></strong
>,?
<strong
><a href="/en-US/docs/Web/SVG/Content_type#number"
><number></a
></strong
>,?
<strong
><a href="/en-US/docs/Web/SVG/Content_type#number"
><number></a
></strong
>
</td>
</tr>
<tr>
<th scope="row">Default value</th>
<td><em>none</em></td>
</tr>
<tr>
<th scope="row">Animatable</th>
<td>Yes</td>
</tr>
</tbody>
</table>
### `<view>`
For {{SVGElement('view')}}, `viewBox` defines the position and dimension for the content of the `<view>` element.
<table class="properties">
<tbody>
<tr>
<th scope="row">Value</th>
<td>
<strong
><a href="/en-US/docs/Web/SVG/Content_type#number"
><number></a
></strong
>,?
<strong
><a href="/en-US/docs/Web/SVG/Content_type#number"
><number></a
></strong
>,?
<strong
><a href="/en-US/docs/Web/SVG/Content_type#number"
><number></a
></strong
>,?
<strong
><a href="/en-US/docs/Web/SVG/Content_type#number"
><number></a
></strong
>
</td>
</tr>
<tr>
<th scope="row">Default value</th>
<td><em>none</em></td>
</tr>
<tr>
<th scope="row">Animatable</th>
<td>Yes</td>
</tr>
</tbody>
</table>
## Examples
```css hidden
html,
body,
svg {
height: 100%;
vertical-align: top;
}
svg:not(:root) {
display: inline-block;
}
```
The code snippet below includes three {{SVGElement("svg")}}s with different `viewbox` attribute values and identical {{SVGElement("rect")}} and {{SVGElement("circle")}} descendants creating very different results. The size of `<rect>` is defined using relative units, so the visual size of the square produced looks unchanged regardless of the `viewBox` value. The radius length {{SVGAttr("r")}} attribute of the `<circle>` is the same in each case, but this user unit value is resolved against the size defined in the `viewBox`, producing different results in each case.
```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%" />
<circle cx="50%" cy="50%" r="4" fill="white" />
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%" />
<circle cx="50%" cy="50%" r="4" fill="white" />
</svg>
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%" />
<circle cx="50%" cy="50%" r="4" fill="white" />
</svg>
```
{{EmbedLiveSample("Examples", '100%', 200)}}
The user units of `r="4"` are resolved against the `viewBox` sizes, creating dramatically different circle sizes. The exact effect of the `viewbox` attribute is influenced by the {{ SVGAttr("preserveAspectRatio") }} attribute.
> [!NOTE]
> Values for `width` or `height` lower or equal to `0` disable rendering of the element.
## Specifications
{{Specifications}}