initial commit

1 files changed, 92 insertions, 0 deletions

diff --git a/files/zh-cn/web/svg/attribute/clip/index.html b/files/zh-cn/web/svg/attribute/clip/index.html
new file mode 100644
index 0000000000..8409d35fca
--- /dev/null
+++ b/files/zh-cn/web/svg/attribute/clip/index.html
@@ -0,0 +1,92 @@
+---
+title: clip
+slug: Web/SVG/Attribute/clip
+tags:
+  - SVG
+  - SVG 属性
+translation_of: Web/SVG/Attribute/clip
+---
+<div>{{SVGRef}}{{deprecated_header}}</div>
+
+<p><strong><code>clip</code></strong> 属性是定义元素可见区域的属性。</p>
+
+<p><code>clip</code> 属性的参数值与 {{ cssxref("clip","CSS clip property") }} 的参数值定义相同。指示当前用户坐标的无单位的值，可以用在 <code>&lt;shape&gt;</code> 的坐标值上。<code>auto</code> 值定义了一个剪切路径，其边界沿着由给定元素创建的视口的边界。</p>
+
+<p>As a presentation attribute, it can be applied to any element but it has effect only on the following six elements: {{ SVGElement("svg") }}, {{ SVGElement("symbol") }}, {{ SVGElement("image") }}, {{ SVGElement("foreignObject") }}, {{ SVGElement("pattern") }}, {{ SVGElement("marker") }}</p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Auto clipping --&gt;
+  &lt;svg x="0" width="10" height="10"
+       clip="auto"&gt;
+    &lt;circle cx="5" cy="5" r="4" stroke="green" /&gt;
+  &lt;/svg&gt;
+
+  &lt;!-- Rect(top, right, bottom, left) clipping --&gt;
+  &lt;svg x="10" width="10" height="10"
+       clip="rect(1, 9, 8, 2)"&gt;
+    &lt;circle cx="5" cy="5" r="4" stroke="green" /&gt;
+  &lt;/svg&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('topExample', '100%', 150)}}</p>
+</div>
+
+<h2 id="用法">用法</h2>
+
+<p class="warning"><strong>Warning:</strong> This property is deprecated. Use {{cssxref("clip-path")}} instead.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">可用值</th>
+   <td><strong>auto</strong> | &lt;shape&gt; | inherit</td>
+  </tr>
+  <tr>
+   <th scope="row">默认值</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The value <code>auto</code> defines a clipping path along the bounds of the viewport created by the given element.</p>
+
+<p>The value <code>rect()</code> defines a clipping rectangle following the following syntax: <code>rect(&lt;top&gt;, &lt;right&gt;, &lt;bottom&gt;, &lt;left&gt;)</code>. The <code>&lt;top&gt;</code> and <code>&lt;bottom&gt;</code> values specify offsets from the <em>top border edge</em> of the element viewport, while <code>&lt;right&gt;</code> and <code>&lt;left&gt;</code> specify offsets from the <em>left border edge</em> of the element viewport.</p>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("svg.attributes.presentation.clip")}}</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">备注</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Masks', '#clip-property', 'clip')}}</td>
+   <td>{{Spec2('CSS Masks')}}</td>
+   <td>Deprecates <code>clip</code> property, suggests {{cssxref("clip-path")}} as replacement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "masking.html#ClipProperty", "clip")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>