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
|
---
title: viewBox
slug: Web/SVG/Attribute/viewBox
translation_of: Web/SVG/Attribute/viewBox
---
<div>{{SVGRef}}</div>
<p>O atributo <code><strong>viewBox</strong></code> define a posição e a dimensão, no espaço do usuário, de uma viewport SVG.</p>
<p>The value of the <code>viewBox</code> attribute is a list of four numbers: <code><var>min-x</var></code>, <code><var>min-y</var></code>, <code><var>width</var></code> and <code><var>height</var></code>. The numbers separated by whitespace and/or a comma, which specify a rectangle in user space which is mapped to the bounds of the viewport established for the associated SVG element (not the <a href="/en-US/docs/Glossary/viewport">browser viewport</a>).</p>
<div id="topExample">
<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }
svg:not(:root) { display: inline-block; }</pre>
</div>
<pre class="brush: xml"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<!--
with relative unit such as percentage, the visual size
of the square looks unchanged regardless of the viewBox
-->
<rect x="0" y="0" width="100%" height="100%"/>
<!--
with a large viewBox the circle looks small
as it is using user units for the r attribute:
4 resolved against 100 as set in the viewBox
-->
<circle cx="50%" cy="50%" r="4" fill="white"/>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<!--
with relative unit such as percentage, the visual size
of the square looks unchanged regardless of the viewBox`
-->
<rect x="0" y="0" width="100%" height="100%"/>
<!--
with a small viewBox the circle looks large
as it is using user units for the r attribute:
4 resolved against 10 as set in the viewBox
-->
<circle cx="50%" cy="50%" r="4" fill="white"/>
</svg>
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
<!--
The point of coordinate 0,0 is now in the center of the viewport,
and 100% is still resolve to a width or height of 10 user units so
the rectangle looks shifted to the bottom/right corner of the viewport
-->
<rect x="0" y="0" width="100%" height="100%"/>
<!--
With the point of coordinate 0,0 in the center of the viewport the
value 50% is resolve to 5 which means the center of the circle is
in the bottom/right corner of the viewport.
-->
<circle cx="50%" cy="50%" r="4" fill="white"/>
</svg></pre>
<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
</div>
<p>The exact effect of this attribute is influenced by the {{ SVGAttr("preserveAspectRatio") }} attribute.</p>
<p class="note"><strong>Note:</strong> Values for <code><var>width</var></code> or <code><var>height</var></code> lower or equal to <code>0</code> disable rendering of the element.</p>
<p>Five elements are using this attribute: {{SVGElement("marker")}}, {{SVGElement("pattern")}}, {{ SVGElement("svg") }}, {{ SVGElement("symbol") }}, and {{ SVGElement("view") }}.</p>
<h2 id="marker">marker</h2>
<p>For {{SVGElement('marker')}}, <code>viewBox</code> defines the position and dimension for the content of the <code><marker></code> element.</p>
<table class="standard-table">
<tbody>
<tr>
<th scope="row">Value</th>
<td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/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>
<h2 id="pattern">pattern</h2>
<p>For {{SVGElement('pattern')}}, <code>viewBox</code> defines the position and dimension for the content of the pattern tile.</p>
<table class="standard-table">
<tbody>
<tr>
<th scope="row">Value</th>
<td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/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>
<h2 id="svg">svg</h2>
<p>For {{SVGElement('svg')}}, <code>viewBox</code> defines the position and dimension for the content of the <code><svg></code> element.</p>
<table class="standard-table">
<tbody>
<tr>
<th scope="row">Value</th>
<td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/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>
<h2 id="symbol">symbol</h2>
<p>For {{SVGElement('symbol')}}, <code>viewBox</code> defines the position and dimension for the content of the <code><symbol></code> element.</p>
<table class="standard-table">
<tbody>
<tr>
<th scope="row">Value</th>
<td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/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>
<h2 id="view">view</h2>
<p>For {{SVGElement('view')}}, <code>viewBox</code> defines the position and dimension for the content of the <code><view></code> element.</p>
<table class="standard-table">
<tbody>
<tr>
<th scope="row">Value</th>
<td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/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>
<h2 id="Specification">Specification</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("SVG2", "coords.html#ViewBoxAttribute", "viewBox")}}</td>
<td>{{Spec2("SVG2")}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName("SVG1.1", "coords.html#ViewBoxAttribute", "viewBox")}}</td>
<td>{{Spec2("SVG1.1")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
|
