clip-path

La propriété clip-path empêche une portion d'un élément d'être affichée en définissant une région de rognage. Seule une zone spécifique de l'élément sera affichée. La zone de rognage est un chemin défini avec une URL faisant référence à un SVG externe ou en ligne ou grâce à une fonction de forme comme circle().

Note : La propriété clip-path remplace la propriété clip désormais dépréciée.

Syntaxe

/* Valeurs avec un mot-clé */
clip-path: none;

/* Valeurs pointant vers une image */
/* Type <clip-source> */
clip-path: url(resources.svg#c1);

/* Valeurs de boîte */
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;

/* Valeurs géométriques            */
/* avec une notation fonctionnelle */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');

/* Combinaison boîte & géométrie */
clip-path: padding-box circle(50px at 0 100px);

/* Valeurs globales */
clip-path: inherit;
clip-path: initial;
clip-path: unset;

La propriété clip-path est définie avec une ou plusieurs des valeurs listées ci-après.

Valeurs

url()
Une URL qui fait référence à un élément contenant le chemin de rognage.
inset(), circle(), ellipse(), polygon()
Une fonction <basic-shape>. Une telle forme utilise la valeur <geometry-box> pour déterminer la taille et la position de la forme. Si aucune boîte de géométrie n'est indiquée, c'est la boîte de bordure (border-box) qui sera utilisée comme boîte de réference.
<geometry-box>
Si cette valeur est combinée avec une valeur <basic-shape>, elle définira la boîte de référence dans laquelle placer la forme. Si elle est utilisée seule, ce sont les bords de la boîte (ainsi que les éventuels coins arrondis définis avec border-radius) qui sont utilisés comme ligne de rognage. Cette composante peut prendre les valeurs suivante :
fill-box
La boîte englobant (bounding box) est utilisée comme boîte de référence.
stroke-box
La boîte de contour de la boîte englobante est utilisée comme boîte de référence.
view-box
La zone d'affichage SVG la plus proche est utilisée comme boîte de référence. Si un attribut viewBox est défini pour l'élément qui crée la zone d'affichage SVG, la boîte de référence est située à l'origine du système construit par viewBox et les dimensions de la boîte de référence sont les valeurs de hauteur et de largeur de l'attribut viewBox.
margin-box
La boîte de marge est utilisée comme boîte de référence
border-box
La boîte de bordure est utilisée comme boîte de référence
padding-box
La boîte de remplissage (padding) est utilisée comme boîte de référence
content-box
La boîte de contenu est utilisée comme boîte de référence.
none
Aucun chemin de rognage n'est créé.

Note : Si la valeur calculée est différente de none, cela entraînera  la création d'un nouveau contexte d'empilement (de la même façon qu'opacity avec des valeurs différentes de 1).

Syntaxe formelle

<clip-source> | [ <basic-shape> || <geometry-box> ] | none
où 
<clip-source> = <url>
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box
où 
<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
où 
<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

Exemples

Comparaison entre HTML et SVG

Exemple complet

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>
  <option value="path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z')">path</option>
</select>

CSS

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

Résultat

Spécifications

Spécification État Commentaires
CSS Masking Module Level 1
La définition de 'clip-path' dans cette spécification.		 Candidat au statut de recommandation Extension aux élément HTML. clip-path remplace la propriété clip désormais dépréciée.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de 'clip-path' dans cette spécification.		 Recommendation Définition initiale (s'applique uniquement aux éléments SVG)
Valeur initialenone
Applicabilitétous les éléments ; en SVG, cela s'applique aux éléments conteneurs à l'exception des éléments defs et des éléments graphiques
Héritéenon
Pourcentagesrefer to reference box when specified, otherwise border-box
Médiavisuel
Valeur calculéecomme spécifié mais avec les valeurs url rendues absolues
Type d'animationoui, comme spécifié pour basic-shape, sinon, non
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
clip-pathChrome Support complet 55
Support complet 55
Support complet 23
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12
Notes
Support complet 12
Notes
Notes Edge only supports clip paths defined by url().
Firefox Support complet 3.5IE Support complet 10
Notes
Support complet 10
Notes
Notes Internet Explorer only supports clip paths defined by url().
Opera Support complet 42
Support complet 42
Support complet 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari Support complet 9.1
Support complet 9.1
Support complet 6.1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet 55
Support complet 55
Support complet ≤37
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 55
Support complet 55
Support complet 25
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Android Support complet 4Opera Android Support complet 42
Support complet 42
Support complet 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari iOS Support complet 9.3
Support complet 9.3
Support complet 6.1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android Support complet 6.0
Support complet 6.0
Support complet 1.5
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
AnimationsChrome Support complet 55Edge Support complet 79Firefox Support complet 49IE Aucun support NonOpera Support complet 42Safari Aucun support NonWebView Android Support complet 55Chrome Android Support complet 55Firefox Android Support complet 49Opera Android Support complet 42Safari iOS Aucun support NonSamsung Internet Android Support complet 6.0
<basic-shape>Chrome Support complet 23Edge Support complet 79Firefox Support complet 54
Support complet 54
Aucun support 47 — 54
Désactivée
Désactivée From version 47 until version 54 (exclusive): this feature is behind the layout.css.clip-path-shapes.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 15Safari Support complet 6.1WebView Android Support complet 4.4Chrome Android Support complet 25Firefox Android Support complet 54
Support complet 54
Aucun support 47 — 54
Désactivée
Désactivée From version 47 until version 54 (exclusive): this feature is behind the layout.css.clip-path-shapes.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 14Safari iOS Support complet 6.1Samsung Internet Android Support complet 1.5
fill-box and stroke-boxChrome Aucun support NonEdge Aucun support NonFirefox Support complet 51
Notes
Support complet 51
Notes
Notes This value was supported before Firefox 51, but as an alias to border-box.
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Support complet 51
Notes
Support complet 51
Notes
Notes This value was supported before Firefox 51, but as an alias to border-box.
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
On HTML elementsChrome Support complet 23Edge Support complet 79Firefox Support complet 3.5IE Aucun support NonOpera Support complet 15Safari Support complet 6.1WebView Android Support complet 4.4Chrome Android Support complet 25Firefox Android Support complet 4Opera Android Support complet 14Safari iOS Support complet 6.1Samsung Internet Android Support complet 1.5
path()Chrome Aucun support NonEdge Aucun support NonFirefox Support complet 71
Support complet 71
Support complet 63
Désactivée
Désactivée From version 63: this feature is behind the layout.css.clip-path-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Support complet 63
Désactivée
Support complet 63
Désactivée
Désactivée From version 63: this feature is behind the layout.css.clip-path-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
On SVG elementsChrome Support complet 23Edge Support complet 12Firefox Support complet 52IE Support complet 10Opera Support complet 15Safari Support complet 6.1WebView Android Support complet 4.4Chrome Android Support complet 25Firefox Android Support complet 52Opera Android Support complet 14Safari iOS Support complet 6.1Samsung Internet Android Support complet 1.5

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Sujets associés