clip-path

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨mars 2017⁩.

L'attribut clip-path permet d'appliquer un détourage à un élément.

Note : clip-path étant un attribut de présentation, il peut être utilisé comme propriété CSS.

Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: <a>, <circle>, <clipPath>, <ellipse>, <g>, <glyph>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <symbol>, <text>, <use>

Exemple

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  <clipPath id="myClip" clipPathUnits="objectBoundingBox">
    <circle cx=".5" cy=".5" r=".5" />
  </clipPath>

  <!-- En haut à gauche: Applique un détourage précédemment crée -->
  <rect
    x="1"
    y="1"
    width="8"
    height="8"
    stroke="green"
    clip-path="url(#myClip)" />

  <!-- En haut à droite: Applique un détourage sur fill-box via une forme CSS.
       Revient à créer un détourage avec clipPathUnits="objectBoundingBox" -->
  <rect
    x="11"
    y="1"
    width="8"
    height="8"
    stroke="green"
    clip-path="circle() fill-box" />

  <!-- En bas à gauche: Applique un détourage sur stroke-box via une forme CSS. -->
  <rect
    x="1"
    y="11"
    width="8"
    height="8"
    stroke="green"
    clip-path="circle() stroke-box" />

  <!-- En bas à droite: Applique un détourage sur view-box via une forme CSS.
       Revient à créer un détourage avec clipPathUnits="userSpaceOnUse" -->
  <rect
    x="11"
    y="11"
    width="8"
    height="8"
    stroke="green"
    clip-path="circle() view-box" />
</svg>

Notes d'usage

Valeur	`url()` \| [ `<basic-shape>` \|\| <geometry-box> ] \| `none`
Valeur par défaut	`none`
Animation	Oui

<geometry-box>: une information supplémentaire pour dire comment une forme CSS est appliquée à un élément: fill-box indique d'utiliser la zone de sélection de l'objet ; stroke-box d'utiliser la zone de sélection de l'objet en prenant en plus le contour de l'élément; view-box d'utiliser le document SVG parent.

Note : Pour plus d'informations sur la syntaxe de clip-path, voir la propriété CSS clip-path.

Spécifications

Specification
CSS Masking Module Level 1 # the-clip-path

Compatibilité des navigateurs

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨9 oct. 2025⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content