`Clip-path` - Propriété CSS

clip-path

Résumé des caractéristiques de la propriété `clip-path`

Description rapide

Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...).

Statut

Standard

S'applique à

HTML : tous les éléments.
SVG : conteneurs sauf defs, éléments graphiques, use.

Utilisable sur

HTML, SVG

Valeurs prédéfinies

Pourcentages

A voir suivant la fonction de forme qui est utilisée.

Valeur initiale

none

Héritée par défaut

Non.

Type d'animation

Computed value : lors d'une animation, la propriété clip-path passe progressivement d'une valeur à une autre.

Module W3C

Module CSS - Masquage

Références (W3C)

CSS Masking Module Level 1

Statut du document: CR (document candidat à la recommandation)

Schéma syntaxique de `clip-path`.

Schéma syntaxique de la propriété clip-path.
Les liens du schéma donnent accès à plus de détails. Télécharger le schéma en SVG

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

shape est une forme géométrique de base, définie par une des fonction CSS : circle(), ellipse(), inset(), path(), polygon(), shape().
url est le chemin vers un fichier, le plus souvent SVG.

Description de la propriété `clip-path`.

clip-path définit un contour géométrique (cercle, étoile, etc.) qui servira à découper une partie de l'élément. Voici deux exemples de ce qu'il est possible d'obtenir avec clip-path.

CSS et HTML ne sont pas vraiment des langages de programmation : ils sont dépourvus des structures algorithmiques habituelles en programmation : tests, boucles, etc. Ce sont néanmoins des langages car ils possèdent chacun un vocabulaire et une syntaxe. A contrario XML définit bien une syntaxe mais pas de vocabulaire. En ce sens XML ne peut pas être considéré comme un langage, mais plutôt comme une norme, une référence sur laquelle vont pouvoir se construire d'autres langages. CSS est un complément à tous ces langages basés sur HTML ou XML : il enrichit leurs possibilités en apportant de très nombreuses possibilités de mise en forme et de mise en page.

Découpe suivant un cercle

Découpe d'une image suivant un polygone

Remarque : les parties de l'élément qui sont masquées par clip-path sont également insensibles aux événements de la souris, en particulier au clic.

Valeurs pour `clip-path`.

clip-path: none;

Valeur par défaut. Aucune découpe n'est effectuée : l'élément est visible en entier.
clip-path: inset(h d b g);

La fonction inset() définit un rectangle qui sera utilisé pour découper l'élément : les parties extérieures au rectangle ne sont pas affichées.

Reportez-vous à la page sur la fonction inset() pour une description complète de la syntaxe de cette fonction.
clip-path: circle(r at x y);

Comme son nom l'indique, la fonction circle() définit un cercle qui servira à découper l'élément : seule la partie qui est à l'intérieur du cercle est affichée.

Reportez-vous à la page sur la fonction circle() pour une description complète de la syntaxe.
clip-path: ellipse(r1 r2 at x y);

Semblable à la précédente, la fonction ellipse() définit l'ellipse qui servira à découper l'élément : seule la partie qui est à l'intérieur de l'ellipse est affichée.

Consultez la syntaxe complète de la fonction ellipse().
clip-path: polygon(x1 y1,x2 y2,...);

Enfin la fonction polygon() définit une surface délimitée par une ligne brisée. Seule la partie qui est à l'intérieur de ce polygone est affichée.
Chaque sommet de cette ligne brisée est un point définit par ses coordonnées (x1 et y1 par exemple). Les coordonnées de chacun des points sont séparées par des virgules.

Plus d'informations : consultez la syntaxe complète de la fonction polygon().
clip-path: path('...');

La fonction path() dessine une forme à partir de segments de droite et de courbes. Elle accepte une chaîne de caractères comportant une série de commandes. Ces commandes sont composées d'une lettre suivie de une ou plusieurs valeurs, suivant la syntaxe de SVG. L'unité ne s'indique pas après les valeurs : c'est forcément le pixel.

Plus d'informations : consultez la syntaxe complète de la fonction path().
clip-path: shape(...);

La fonction shape() dessine également une forme à partir de segments de droite et de courbes, tout comme la fonction path(). Mais sa syntaxe est celle du CSS, avec des unités pour spécifier les valeurs.

Plus d'informations : consultez la syntaxe complète de la fonction shape().
clip-path: url(...);

La fonction url() fait référence à un fichier SVG. La forme définie par ce fichier sera la découpe de l'élément. L'URl indiquée peut se résumer à un signet (commençant par #) faisant référence alors à un élément SVG présent sur la page.
clip-path: ... content-box; clip-path: ... padding-box; clip-path: ... border-box; clip-path: ... margin-box; clip-path: ... fill-box; clip-path: ... stroke-box; clip-path: ... view-box;

Ces valeurs, qui suivent une fonction de forme, indiquent la référence par rapport à laquelle la forme doit être calculée. Par exemple circle(50%) border-box définit un cercle centré sur la surface de l'élément incluant la bordure.
clip-path: initial; (none) clip-path: inherit; clip-path: revert; clip-path: revertLayer; clip-path: unset;

Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Exemples avec la propriété `clip-path`.

Images rondes.

Très à la mode depuis quelques temps, les images rondes sont vraiment très faciles à obtenir avec clip-path comme vous le verrez sur le premier exemple. Le deuxième exemple est un peu plus compliqué et a nécessité un peu de SVG.

Exemple avec clip-path


svg xmlns="http://www.w3.org/2000/svg"
  clipPath id="anneau"
    path d="M100,0 
                 A50,50 0 1 0 100,200 A50,50 0 1 0 100,0 Z 
                 M100,60 
                 A40,40 0 1 1 100,140 A40,40 0 1 1 100,60 Z"
    /
  /clipPath
/svg

Animation de la propriété `clip-path`.

Les possibilités d'animation sont infinies : chacune des fonctions de forme accepte des valeurs numériques, qu'il est facile d'animer de façon très progressive.

Exemple d'animation de clip-path

Manipulation de la propriété `clip-path` par programme.

Modifier la valeur de `clip-path` en Javascript.

En Javascript, voici comment modifier la valeur de clip-path. On voit que Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case (un tiret pour séparer les mots), et une autre syntaxe avec la notation en camel-case plus courante en Javascript (une majuscule pour séparer les mots).


	let el = document.getElementById('id');
	el.style['clip-path'] = 'circle(2.5cm)';
	// ou
	let el = document.getElementById('id');
	el.style.clipPath = 'circle(2.5cm)';

Lire en Javascript la valeur de `clip-path`.

Ce code ne relit la valeur de la propriété clip-path que si cette dernière a été affectée via l'attribut style de l'élément, donc dans le code HTML. Les valeurs définies dans les styles via des sélecteurs CSS ne sont pas prises en compte.


	let el = document.getElementById('id');
	let value = el.style['clip-path'];
	// ou
	let el = document.getElementById('id');
	let value = el.style.clipPath;

Lire la valeur calculée de `clip-path` en Javascript.

La valeur calculée résulte de l'évaluation de la cascade des héritages. Si aucune valeur n'est définie pour la propriété clip-path, ni sur l'élément lui-même, ni sur un de ses ancêtres, la valeur calculée est la valeur initiale de clip-path, soit none.


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('clip-path');

Modifier la valeur de la propriété `clip-path` avec JQuery.

Tout comme Javascript, JQuery accepte également les deux notations pour le nom de la propriété, en camel-case ou kebab-case.


 $('#id').css('clip-path', 'circle(2.5cm)');
 // ou
 $('#id').css('clipPath', 'circle(2.5cm)');

Lire la valeur calculée de la propriété `clip-path` avec JQuery.

Le code est plus court qu'en Javascript, mais donne le même résultat.


	let value = $('#id').css('clip-path');

Autres codes.

Reportez-vous à la page Javascript et CSS pour d'autres exemples de code Javascript ou JQuery.

Testez vous-même.

Le premier boutons ci-dessous applique la valeur saisie à la propriété clip-path et affiche ensuite la valeur telle qu'elle a été appliquée. Le deuxième bouton affiche la valeur calculée. Cette dernière permet de voir comment est mémorisée (sérialisée) la valeur de clip-path. On constate en particulier que les pourcentages sont bien mémorisés en tant que pourcentages mais que toutes les autres unités sont converties en pixels.

Simulateur avec la propriété `clip-path`.

On applique, sur l'élément de démo, clip-path:ellipse() suivi de la valeur choisie comme bloc de référence.

Inter quos Paulus eminebat notarius ortus in Hispania, glabro quidam sub vultu latens, odorandi vias periculorum occultas perquam sagax. Is in Brittanniam missus ut militares quosdam perduceret ausos conspirasse Magnentio, cum reniti non possent, iussa licentius supergressus fluminis modo fortunis conplurium sese repentinus infudit et ferebatur per strages multiplices ac ruinas, vinculis membra. Inter quos Paulus eminebat notarius ortus in Hispania, glabro quidam sub vultu latens, odorandi vias periculorum occultas perquam sagax. is in Brittanniam missus ut militares quosdam perduceret ausos conspirasse Magnentio, cum reniti non possent, iussa licentius supergressus fluminis modo fortunis conplurium sese repentinus infudit et ferebatur per strages multiplices ac ruinas, vinculis membra. Inter quos Paulus eminebat notarius ortus in Hispania, glabro quidam sub vultu latens, odorandi vias periculorum occultas perquam sagax.

Prise en charge de `clip-path` par les navigateurs.

La propriété clip-path est bien gérée, y compris l'indication d'une boîte après la fonction de forme. Consultez le tableau de compatibilité ci-dessous.

Colonne 1

Support par les navigateurs de la propriété clip-path qui découpe (ou masque) un élément suivant une forme géométrique.

Colonne 2

Support de la valeur fill-box utilisée avec la propriété clip-path.

Colonne 3

Support de la valeur stroke-box utilisée avec la propriété clip-path.

Colonne 4

Support de la valeur view-box utilisée avec la propriété clip-path.

Colonne 5

Support de la fonction path() utilisée avec la propriété clip-path pour définir un polygone.

Propriété
clip-path

Valeur
fill-box

Valeur
stroke-box

Valeur
view-box

Fonction
path()

Estimation de la prise en charge globale.

95%

92%

94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Chrome

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la propriété `clip-path`.

Module CSS - Masquage - Niveau 1

Introduction dans la norme des techniques de masquage.
Première définition de la propriété clip-path.

15 Novembre 2012
Document de travail.
26 Août 2014
Candidat à la recommandation.

Voir aussi, au sujet des techniques de masquage.

Le module de spécification qui standardise tout ce qui concerne le masquage s'appelle CSS Masking Module (Module CSS - Masquage). La propriété clip-path et les propriétés ci-dessous sont référencées dans ce module :