clip-path

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

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'éménet sera affichée. La zone de rognage est un chemin défini avec une une URL faisant référence à un SVG externe ou en ligne ou grâce à une fonction de forme comme circle(). La propriété clip-path remplace la propriété clip désormais dépréciée.

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
Pourcentagescomme spécifié
Médiavisuel
Valeur calculéecomme spécifié mais avec les valeurs url rendues absolues
Animation typeoui, comme spécifié pour basic-shape, sinon, non
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* Valeurs avec un mot-clé */
clip-path: none;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;

/* Valeurs d'image */
clip-path: url(resources.svg#c1);

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

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

Valeurs

<clip-source>
Une URL qui fait référence au chemin de découpe.
<basic-shape>
Une fonction de forme, définie grâce à la spécification CSS Shapes. Une forme simple utilise la boîte de référence pour déterminer la taille et la position de la forme. Si aucune boîte de référence n'est indiquée, la boîte de bordure (border-box) sera utilisée.
<geometry-box>

Utilisée avec <basic-shape>, cette valeur indique la boîte de référence pour la forme. Si elle est définie, les bords de la boîte définie (y compris les coins formés avec border-radius) formeront la zone de rognage.

fill-box

La boîte englobant l'objet sera utilisée comme boîte de référence.

stroke-box

La boîte de contour (stroke) est utilisée comme boîte de référence.

view-box

La zone d'affichage (viewport) du plus proche SVG est utilisée comme boîte de référence. Si l'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 positionnée à l'origine du système de coordonnées formé par l'attribut viewBox et les dimensions de la boîte de référence correspondent aux valeurs de largeur et de hauteur de l'attribut viewBox.

none
Aucun chemin de rognage n'est créé.

Syntaxe formelle

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


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


<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


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

Résultat

Spécifications

Spécification État Commentaires
CSS Masking Level 1
La définition de 'clip-path' dans cette spécification.
Candidat au statut de recommandation Extension aux élément HTML
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)

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Applicable sur les éléments HTML 24-webkit[1] 3.5 (1.9.1) Pas de support (Oui)-webkit[1] ?
<basic-shape> ? 47 (47)[2] Pas de support ? ?
Applicable que le contenu SVG ? Pas de support[3] Pas de support ? ?
inset() ? 51 (51)[2] Pas de support ? ?
Gestion des animations ? 49 (49) Pas de support ? ?
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Applicable sur les éléments HTML ? 1.0 (1.9.1) Pas de support ? ?
<basic-shape> ? 47.0 (47)[2] Pas de support ? ?
Applicable que le contenu SVG ? Pas de support[3] Pas de support ? ?
inset() ? 51.0 (51)[2] Pas de support ? ?
Gestion des animations ? 49.0 (49) Pas de support ? ?

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

[2] Cette fonctionnalité est implémentée et disponible via la préférence layout.css.clip-path-shapes.enabled qui est désactivée par défaut. Les formes simples, à l'exception de inset(), ont été implémentée avec le bug 1075457, inset() a été implémentée avec le bug bug 1246762.

[3] Cette fonctionnalité n'est pas encore implémentée, cf. bug 1246741.

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, teoli, Philippe_Lambotte
 Dernière mise à jour par : SphinxKnight,