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 initiale | none |
---|---|
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ée | non |
Pourcentages | comme spécifié |
Média | visuel |
Valeur calculée | comme spécifié mais avec les valeurs url rendues absolues |
Type d'animation | oui, comme spécifié pour basic-shape , sinon, non |
Ordre canonique | l'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 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;
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 (bo
rder-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 avecborder-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 parviewBox
et les dimensions de la boîte de référence sont les valeurs de hauteur et de largeur de l'attributviewBox
. 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
- There is no clipping path created.
Syntaxe formelle
<clip-source> | [ <basic-shape> || <geometry-box> ] | noneoù
<clip-source> = <url>
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<geometry-box> = <shape-box> | fill-box | stroke-box | view-boxoù
<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-boxoù
<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>
JavaScript
var clipPathSelect = document.getElementById("clipPath"); clipPathSelect.addEventListener("change", function (evt) { document.getElementById("clipped").style.clipPath = evt.target.value; });
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 | ? | ? |
fill-box et stroke-box |
? | 51 (51)[4] | 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 | ? | ? |
fill-box et stroke-box |
? | 51 (51)[4] | 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.
[4] Avant Firefox 51, fill-box
et stroke-box
se comportaient comme des synonymes de border-box
.
Voir aussi
- L'attribut SVG
clip-rule
mask
filter
- Appliquer des effets SVG sur du contenu HTML
- L'attribut SVG
clip-path