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
|
---
title: viewBox
slug: Web/SVG/Attribute/viewBox
tags:
- SVG
- SVG Attribute
- viewBox
translation_of: Web/SVG/Attribute/viewBox
---
<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG 属性参考</a></p>
<p>viewBox属性允许指定一个给定的一组图形伸展以适应特定的容器元素。</p>
<p>viewBox属性的值是一个包含4个参数的列表 <code>min-x</code>, <code>min-y</code>, <code>width</code> and <code>height</code>， 以空格或者逗号分隔开， 在用户空间中指定一个矩形区域映射到给定的元素,查看属性{{ SVGAttr("preserveAspectRatio") }}。</p>
<p>不允许宽度和高度为负值,0则禁用元素的呈现。</p>
<pre class="brush: html"><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>
<p>这个属性会受到 {{ SVGAttr("preserveAspectRatio") }} 的影响。</p>
<div class="blockIndicator note">
<p><strong>温馨提示:：</strong><code>width</code> 或者 <code>height</code> 的值，小于或等于0的情况下，这个元素将不会被渲染出来。</p>
</div>
<p>有 {{SVGElement("marker")}}, {{SVGElement("pattern")}}, {{ SVGElement("svg") }}, {{ SVGElement("symbol") }}, 和 {{ SVGElement("view") }} 等五个 svg 元素可以有这个属性。</p>
<h2 id="Usage_context"><span style="font-size: 2.33333rem; letter-spacing: -0.00278rem;">Usage context</span></h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="row">Categories</th>
<td>None</td>
</tr>
<tr>
<th scope="row">Value</th>
<td><em>See above</em></td>
</tr>
<tr>
<th scope="row">Animatable</th>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Normative document</th>
<td><a class="external" href="http://www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute" title="http://www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute">SVG 1.1 (2nd Edition)</a></td>
</tr>
</tbody>
</table>
<h2 id="Elements">Elements</h2>
<p>下面的元素可以使用viewBox属性</p>
<ul>
<li>{{ SVGElement("svg") }}</li>
<li>{{ SVGElement("symbol") }}</li>
<li>{{ SVGElement("image") }}</li>
<li>{{ SVGElement("marker") }}</li>
<li>{{ SVGElement("pattern") }}</li>
<li>{{ SVGElement("view") }}</li>
</ul>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en/SVG/Tutorial/Positions" title="https://developer.mozilla.org/en/SVG/Tutorial/Positions">SVG Getting Started: Positions</a></li>
</ul>
|
