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
|
---
title: clip-path
slug: Web/CSS/clip-path
translation_of: Web/CSS/clip-path
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>
<p>La propiedad CSS <code><strong>clip-path</strong></code> proviene que una porción de un elemento se muestre definiendo una región de recorte para mostrarse, es decir, solo una parte especifica del elemento se mostrara. La región recortada es un path especificado como una URL referenciando a un SVG inline o externo, o un metodo de figura como lo es <a href="/en-US/docs/Web/SVG/Element/circle">circle()</a>. La propiedad clip-path reemplaza la ahora deprecada propiedad <a href="/en-US/docs/Web/CSS/clip">clip</a>.</p>
<pre class="brush:css no-line-numbers">/* Valores clave */
clip-path: none;
/* Valores de imagen */
clip-path: url(resources.svg#c1);
/* Valores de caja */
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
/* Valores geometricos */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
/* Valores Geometricos y de caja combinados */
clip-path: padding-box circle(50px at 0 100px);
/* Valores globales */
clip-path: inherit;
clip-path: initial;
clip-path: unset;
</pre>
<p>{{cssinfo}}</p>
<h2 id="Syntax">Syntax</h2>
<h3 id="Valores">Valores</h3>
<dl>
<dt><code>url()</code></dt>
<dd>Represents a URL referencing a clip path element.</dd>
<dt> </dt>
<dt><code>inset()</code>, <code>circle()</code>, <code>ellipse()</code>, <code>polygon()</code></dt>
<dd>A {{cssxref("<basic-shape>")}} function. Such a shape will make use of the specified <code><geometry-box></code> to size and position the basic shape. If no geometry box is specified, the <code>border-box</code> will be used as reference box.</dd>
<dt><code><geometry-box></code></dt>
<dd>If specified in combination with a <code><basic-shape></code>, it provides the reference box for the basic shape. If specified by itself, it uses the edges of the specified box including any corner shaping (e.g. defined by {{cssxref("border-radius")}}) as clipping path. The geometry box can be one of the following values:
<dl>
<dt><code>fill-box</code></dt>
<dd>Uses the object bounding box as reference box.</dd>
<dt><code>stroke-box</code></dt>
<dd>Uses the stroke bounding box as reference box.</dd>
<dt><code>view-box</code></dt>
<dd>Uses the nearest SVG viewport as reference box. If a {{SVGAttr("viewBox")}} attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the <code>viewBox</code> attribute and the dimension of the reference box is set to the width and height values of the <code>viewBox</code> attribute.</dd>
<dt><code>margin-box</code></dt>
<dd>Uses the <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">margin box</a> as the reference box.</dd>
<dt><code>border-box</code></dt>
<dd>Uses the <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">border box</a> as the reference box.</dd>
<dt><code>padding-box</code></dt>
<dd>Uses the <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">padding box</a> as the reference box.</dd>
<dt><code>content-box</code></dt>
<dd>Uses the <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">content box</a> as the reference box.</dd>
</dl>
</dd>
<dt><code>none</code></dt>
<dd>There is no clipping path created.</dd>
</dl>
<h3 id="Formal_syntax">Formal syntax</h3>
{{csssyntax}}
<h2 id="Examples">Examples</h2>
<pre class="brush:css">/* inline SVG */
.target {
clip-path: url(#c1);
}
/* external SVG */
.anothertarget {
clip-path: url(resources.svg#c1);
}
/* circle */
.circleClass {
clip-path: circle(15px at 20px 20px);
}</pre>
<h2 id="Live_sample">Live sample</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
alt="MDN logo">
<svg height="0" width="0">
<defs>
<clipPath id="cross">
<rect y="110" x="137" width="90" height="90"/>
<rect x="0" y="110" width="90" height="90"/>
<rect x="137" y="0" width="90" height="90"/>
<rect x="0" y="0" width="90" height="90"/>
</clipPath>
</defs>
</svg>
<select id="clipPath">
<option value="none">none</option>
<option value="circle(100px at 110px 100px)">circle</option>
<option value="url(#cross)" selected>cross</option>
<option value="inset(20px round 20px)">inset</option>
</select>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">#clipped {
margin-bottom: 20px;
clip-path: url(#cross);
}
</pre>
<div class="hidden">
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js">var clipPathSelect = document.getElementById("clipPath");
clipPathSelect.addEventListener("change", function (evt) {
document.getElementById("clipped").style.clipPath = evt.target.value;
});
</pre>
</div>
<h3 id="Result">Result</h3>
<p>{{EmbedLiveSample("Live_sample", 230, 250)}}</p>
<h2 id="Specifications">Specifications</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("CSS Masks", "#the-clip-path", 'clip-path')}}</td>
<td>{{Spec2('CSS Masks')}}</td>
<td>Extends its application to HTML elements</td>
</tr>
<tr>
<td>{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}</td>
<td>{{Spec2('SVG1.1')}}</td>
<td>Initial definition (applies to SVG elements only)</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("css.properties.clip-path")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web/SVG/Attribute/clip-rule">clip-rule</a>, {{cssxref("mask")}}, {{cssxref("filter")}}</li>
<li><a href="https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/">CSS Shapes, clipping and masking – and how to use them</a></li>
<li><a href="/en-US/docs/Applying_SVG_effects_to_HTML_content">Applying SVG effects to HTML content</a></li>
<li>{{SVGAttr("clip-path")}} SVG attribute</li>
</ul>
|
