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().

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

/* Valeurs d'image */
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%);

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

Syntaxe

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

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 | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]
<fill-rule> = nonzero | evenodd
<box> = border-box | padding-box | content-box

Exemples

Exemples simples

/* SVG en ligne  */
.cible {
  clip-path: url(#c1);
}

/* SVG externe */
.autreCible {
  clip-path: url(resources.svg#c1);
}

/* Un cercle défini grâce à  */
/* la notation fonctionnelle */
.cercle {
  clip-path: circle(15px at 20px 20px);
}

Exemple appliqué

CSS

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

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>

var clipPathSelect = document.getElementById("clipPath");
clipPathSelect.addEventListener("change", function (evt) {
  document.getElementById("clipped").style.clipPath = evt.target.value;
});

Résultat

Spécifications

Compatibilité des navigateurs

[1] Actuellement, Chrome et Opera ne prennent pas en charge les fichiers externes SVG.

[2] Actuellement, Edge ne prend pas en charge cette fonctionnalité. Celle-ci a été demandée sur la page Edge User Voice. Voir aussi la page sur le développement de Edge.

[3] Actuellement, Safari ne prend pas en charge cette fonctionnalité. Cf. WebKit bug 126207.

[4] Internet Explorer et Edge prennent uniquement en charge les chemins de rognages définis avec la notation url().

[5] Cette fonctionnalité était implémentée via la préférence layout.css.clip-path-shapes.enabled qui est désactivée par défaut depuis Gecko 47 ((Firefox 47 / Thunderbird 47 / SeaMonkey 2.44)). Les formes simples, sauf inset(), ont été implémentées avec le bug 1075457, inset() a été implémentée avec le bug 1246762. À partir de Gecko 53 (Firefox 53.0 / Thunderbird 53.0 / SeaMonkey 2.50), la préférence a été activée par défaut pour les canaux Nightly et Developer Edition (bug 1303654). Depuis Gecko 54 ((Firefox 54.0 / Thunderbird 54.0 / SeaMonkey 2.51)), elle est activée par défaut pour les canaux Beta et Release (cf. bug 1247229).

[6] Cette fonctionnalité a été implémentée avec le bug 1246741.

[7] Avant Firefox 51, fill-box et stroke-box étaient synonymes de border-box.

Voir aussi

• L'attribut SVG clip-rule
• mask
• filter
• Appliquer des effets SVG sur du contenu HTML
• Les formes CSS, le clipping et le masking : comment les utiliser (article en anglais)
• L'attribut SVG clip-path