We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

La propiedad CSS clip-path 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 circle(). La propiedad clip-path reemplaza la ahora deprecada propiedad clip.

/* 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;

Valor inicialnone
Applies toall elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
Heredableno
Percentagesrefer to reference box when specified, otherwise border-box
Mediavisual
Valor calculadoas specified, but with url values made absolute
Animation typeyes, as specified for basic-shape, otherwise no
Canonical orderel orden único no-ambigüo definido por la gramática formal

Syntax

Valores

url()
Represents a URL referencing a clip path element.
 
inset(), circle(), ellipse(), polygon()
A <basic-shape> function. Such a shape will make use of the specified <geometry-box> to size and position the basic shape. If no geometry box is specified, the border-box will be used as reference box.
<geometry-box>
If specified in combination with a <basic-shape>, 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 border-radius) as clipping path. The geometry box can be one of the following values:
fill-box
Uses the object bounding box as reference box.
stroke-box
Uses the stroke bounding box as reference box.
view-box
Uses the nearest SVG viewport as reference box. If a 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 viewBox attribute and the dimension of the reference box is set to the width and height values of the viewBox attribute.
margin-box
Uses the margin box as the reference box.
border-box
Uses the border box as the reference box.
padding-box
Uses the padding box as the reference box.
content-box
Uses the content box as the reference box.
none
There is no clipping path created.

Formal syntax

<clip-source> | [ <basic-shape> || <geometry-box> ] | none

where
<clip-source> = <url>
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box

where
<inset()> = inset( <length-percentage>{1,4} [ round <border-radius> ]? )
<circle()> = circle( [ <shape-radius> ]? [ at <position> ]? )
<ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
<polygon()> = polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
<shape-box> = <box> | margin-box

where
<length-percentage> = <length> | <percentage>
<shape-radius> = <length-percentage> | closest-side | farthest-side
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<fill-rule> = nonzero | evenodd
<box> = border-box | padding-box | content-box

Examples

/* 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);
}

Live sample

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>

CSS

#clipped {
  margin-bottom: 20px;
  clip-path: url(#cross);
}

Result

Specifications

Specification Status Comment
CSS Masking Module Level 1
La definición de 'clip-path' en esta especificación.
Candidate Recommendation Extends its application to HTML elements
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La definición de 'clip-path' en esta especificación.
Recommendation Initial definition (applies to SVG elements only)

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
On HTML elements 24-webkit[1]
55.0
Sin soporte[2] 3.5 (1.9.1) Sin soporte (Yes)-webkit[1] Sin soporte[3]
<basic-shape> 55.0 Sin soporte[2] 54 (54)[5] Sin soporte 42.0 Sin soporte[3]
On SVG content 55.0 20 (12.10240)[4] 52 (52)[6] (Yes)[4] 42.0 Sin soporte[3]
inset() 55.0 Sin soporte[2] Sin soporte[5] Sin soporte 42.0 Sin soporte[3]
Animations 55.0 Sin soporte[2] 49 (49) Sin soporte 42.0 Sin soporte[3]
fill-box and stroke-box Sin soporte Sin soporte[2] 51 (51)[7] Sin soporte Sin soporte Sin soporte[3]
Feature Android Android Webview Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
On HTML elements 55.0 55.0 Sin soporte 1.0 (1.9.1) Sin soporte ? Sin soporte[3] (Yes) -webkit
55.0
<basic-shape> 55.0 55.0 Sin soporte 54.0 (54)[5] Sin soporte ? Sin soporte[3] 55.0
On SVG content 55.0 55.0 20 (12.10240)[4] 52.0 (52)[6] Sin soporte ? Sin soporte[3] 55.0
inset() 55.0 55.0 Sin soporte Sin soporte[5] Sin soporte ? Sin soporte[3] 55.0
Animations 55.0 55.0 Sin soporte 49.0 (49) Sin soporte ? Sin soporte[3] 55.0
fill-box and stroke-box Sin soporte Sin soporte Sin soporte 51 (51)[7] Sin soporte ? Sin soporte[3] Sin soporte

[1] Chrome and Opera currently don't support external SVGs.

[2] Edge doesn't support this feature yet. This is requested on the Edge User Voice page. See also the Edge Development page.

[3] Safari doesn't support this feature yet. See WebKit bug 126207.

[4] Internet Explorer and Edge currently only support clip paths defined via url().

[5] This feature was implemented behind the preference layout.css.clip-path-shapes.enabled, defaulting to false, since Gecko 47 (Firefox 47.0 / Thunderbird 47.0 / SeaMonkey 2.44). Basic shapes except inset() got implemented in error 1075457, inset() got implemented in error 1246762. Since Gecko 53 (Firefox 53.0 / Thunderbird 53.0 / SeaMonkey 2.50) the preference defaulted to true on Nightly and Developer Edition (error 1303654), since Gecko 54 (Firefox 54.0 / Thunderbird 54.0 / SeaMonkey 2.51) it also defaults to true on Beta and Stable releases error 1247229.

[6] This feature got implemented in error 1246741.

[7] Before Firefox 51, fill-box and stroke-box were aliases for border-box.

See also

Etiquetas y colaboradores del documento

Colaboradores en esta página: jorgeherrera9103, david-velilla, CarlosLinares
Última actualización por: jorgeherrera9103,