initial commit

1 files changed, 116 insertions, 0 deletions

diff --git a/files/zh-cn/web/svg/attribute/viewbox/index.html b/files/zh-cn/web/svg/attribute/viewbox/index.html
new file mode 100644
index 0000000000..6edd649c84
--- /dev/null
+++ b/files/zh-cn/web/svg/attribute/viewbox/index.html
@@ -0,0 +1,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">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!--
+  with relative unit such as percentage, the visual size
+  of the square looks unchanged regardless of the viewBox
+  --&gt;
+  &lt;rect x="0" y="0" width="100%" height="100%"/&gt;
+
+  &lt;!--
+  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
+  --&gt;
+  &lt;circle cx="50%" cy="50%" r="4" fill="white"/&gt;
+&lt;/svg&gt;
+
+&lt;svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!--
+  with relative unit such as percentage, the visual size
+  of the square looks unchanged regardless of the viewBox`
+  --&gt;
+  &lt;rect x="0" y="0" width="100%" height="100%"/&gt;
+
+  &lt;!--
+  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
+  --&gt;
+  &lt;circle cx="50%" cy="50%" r="4" fill="white"/&gt;
+&lt;/svg&gt;
+
+&lt;svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!--
+  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
+  --&gt;
+  &lt;rect x="0" y="0" width="100%" height="100%"/&gt;
+
+  &lt;!--
+  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.
+  --&gt;
+  &lt;circle cx="50%" cy="50%" r="4" fill="white"/&gt;
+&lt;/svg&gt;</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>