files/zh-cn/web/svg/attribute/clip/index.html


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

---
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>