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>
html,body,svg { height:100% }
<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 cssest appliquée à un élément:fill-boxindique d'utiliser la zone de sélection de l'objet ;stroke-boxd'utiliser la zone de sélection de l'objet en prenant en plus le contour de l'élément;view-boxd'utiliser le document SVG parent.
Note: Pour plus d'informations sur la syntaxe de clip-path, voir la propriété CSS clip-path.
Compatibilité des navigateurs
Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une pull request sur https://github.com/mdn/browser-compat-data.
| Ordinateur | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
clip-path | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Légende
- Compatibilité inconnue
- Compatibilité inconnue
Spécifications
| Spécification | Statut | Commentaire |
|---|---|---|
| CSS Masking Module Level 1 La définition de 'clip-path' dans cette spécification. |
Candidat au statut de recommandation | Étend son application aux éléments HTML. La propriété clip-path remplace la propriété clip 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 sur les éléments SVG uniquement). |