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'élément sera affichée. La zone de rognage est un chemin défini avec une URL faisant référence à un SVG externe ou en ligne ou grâce à une fonction de forme comme circle()
.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
Note : La propriété clip-path
remplace la propriété clip
désormais dépréciée.
Syntaxe
/* Valeurs avec un mot-clé */ clip-path: none; /* Valeurs pointant vers une image */ /* Type <clip-source> */ 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%); clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z'); /* 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;
La propriété clip-path
est définie avec une ou plusieurs des valeurs listées ci-après.
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 (border-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
- Aucun chemin de rognage n'est créé.
Note : Si la valeur calculée est différente de none
, cela entraînera la création d'un nouveau contexte d'empilement (de la même façon qu'opacity
avec des valeurs différentes de 1).
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 | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<fill-rule> = nonzero | evenodd
<box> = border-box | padding-box | content-box
Exemples
Comparaison entre HTML et SVG
<svg class="defs"> <defs> <clipPath id="myPath" clipPathUnits="objectBoundingBox"> <path d="M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z" /> </clipPath> </defs> </svg> <div class="grid"> <div class="col"> <div class="note">clip-path: none</div> <div class="row"> <div class="cell"> <span>HTML</span> <div class="container"> <p class="none"> I LOVE<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>SVG</span> <div class="container viewbox"> <svg viewBox="0 0 192 192"> <g class="none"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">I LOVE</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: url(#myPath)<br><br> Assuming the following clipPath definition: <pre> <svg> <clipPath id="myPath" clipPathUnits="objectBoundingBox"> <path d="M0.5,1 C 0.5,1,0,0.7,0,0.3 A 0.25,0.25,1,1,1,0.5,0.3 A 0.25,0.25,1,1,1,1,0.3 C 1,0.7,0.5,1,0.5,1 Z" /> </clipPath> </svg></pre> </div> <div class="row"> <div class="cell"> <span>HTML</span> <div class="container"> <p class="svg"> I LOVE<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>SVG</span> <div class="container viewbox"> <svg viewBox="0 0 192 192"> <g class="svg"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">I LOVE</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z') </div> <div class="row"> <div class="cell"> <span>HTML</span> <div class="container"> <p class="svg2"> I LOVE<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>SVG</span> <div class="container viewbox"> <svg viewBox="0 0 192 192"> <g class="svg2"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">I LOVE</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: circle(25%)</div> <div class="row"> <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape1"> I LOVE<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>SVG</span> <div class="container viewbox"> <svg viewBox="0 0 192 192"> <g class="shape1"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">I LOVE</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: circle(25% at 25% 25%)</div> <div class="row"> <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape2"> I LOVE<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>SVG</span> <div class="container viewbox"> <svg viewBox="0 0 192 192"> <g class="shape2"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">I LOVE</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: fill-box circle(25% at 25% 25%)</div> <div class="row"> <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape3"> I LOVE<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>SVG</span> <div class="container viewbox"> <svg viewBox="0 0 192 192"> <g class="shape3"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">I LOVE</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: stroke-box circle(25% at 25% 25%)</div> <div class="row"> <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape4"> I LOVE<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>SVG</span> <div class="container viewbox"> <svg viewBox="0 0 192 192"> <g class="shape4"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">I LOVE</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: view-box circle(25% at 25% 25%)</div> <div class="row"> <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape5"> I LOVE<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>SVG</span> <div class="container viewbox"> <svg viewBox="0 0 192 192"> <g class="shape5"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">I LOVE</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: margin-box circle(25% at 25% 25%)</div> <div class="row"> <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape6"> I LOVE<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>SVG</span> <div class="container viewbox"> <svg viewBox="0 0 192 192"> <g class="shape6"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">I LOVE</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: border-box circle(25% at 25% 25%)</div> <div class="row"> <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape7"> I LOVE<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>SVG</span> <div class="container viewbox"> <svg viewBox="0 0 192 192"> <g class="shape7"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">I LOVE</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: padding-box circle(25% at 25% 25%)</div> <div class="row"> <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape8"> I LOVE<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>SVG</span> <div class="container viewbox"> <svg viewBox="0 0 192 192"> <g class="shape8"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">I LOVE</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: content-box circle(25% at 25% 25%)</div> <div class="row"> <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape9"> I LOVE<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>SVG</span> <div class="container viewbox"> <svg viewBox="0 0 192 192"> <g class="shape9"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">I LOVE</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> </div> </div>
html,body { height: 100%; box-sizing: border-box; background: #EEE; } .grid { width: 100%; height: 100%; display: flex; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; flex-wrap: wrap; } .col { flex: 1 auto; } .cell { margin: .5em; padding: .5em; background-color: #FFF; overflow: hidden; text-align: center; flex: 1; } .note { background: #fff3d4; padding: 1em; margin: .5em .5em 0; font: .8em sans-serif; text-align: left; white-space: nowrap; } .note + .row .cell { margin-top: 0; } .container { display: inline-block; border: 1px dotted grey; position:relative; } .container:before { content: 'margin'; position: absolute; top: 2px; left: 2px; font: italic .6em sans-serif; } .viewbox { box-shadow: 1rem 1rem 0 #EFEFEF inset, -1rem -1rem 0 #EFEFEF inset; } .container.viewbox:after { content: 'viewbox'; position: absolute; left: 1.1rem; top: 1.1rem; font: italic .6em sans-serif; } .cell span { display: block; margin-bottom: .5em; } p { font-family: sans-serif; background: #000; color: pink; margin: 2em; padding: 3em 1em; border: 1em solid pink; width: 6em; } .none { clip-path: none; } .svg { clip-path: url(#myPath); } .svg2 { clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z');} .shape1 { clip-path: circle(25%); } .shape2 { clip-path: circle(25% at 25% 25%); } .shape3 { clip-path: fill-box circle(25% at 25% 25%); } .shape4 { clip-path: stroke-box circle(25% at 25% 25%); } .shape5 { clip-path: view-box circle(25% at 25% 25%); } .shape6 { clip-path: margin-box circle(25% at 25% 25%); } .shape7 { clip-path: border-box circle(25% at 25% 25%); } .shape8 { clip-path: padding-box circle(25% at 25% 25%); } .shape9 { clip-path: content-box circle(25% at 25% 25%); } .defs { width: 0; height: 0; margin: 0; } pre { margin-bottom: 0; } svg { margin: 1em; font-family: sans-serif; width: 192px; height: 192px; } svg rect { stroke: pink; stroke-width: 16px; } svg text { fill: pink; text-anchor: middle; } svg text.em { font-style: italic; }
Exemple complet
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> <option value="path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z')">path</option> </select>
CSS
#clipped { margin-bottom: 20px; clip-path: url(#cross); }
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 Module Level 1 La définition de 'clip-path' dans cette spécification. |
Candidat au statut de recommandation | Extension aux élément HTML. clip-path remplace la propriété clip désormais 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 uniquement aux éléments SVG) |
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 | refer to reference box when specified, otherwise border-box |
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 |
Compatibilité des navigateurs
Ordinateur | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
clip-path | Chrome
Support complet
55
| Edge
Support complet
12
| Firefox Support complet 3.5 | IE
Support complet
10
| Opera
Support complet
42
| Safari
Support complet
9.1
| WebView Android
Support complet
55
| Chrome Android
Support complet
55
| Firefox Android Support complet 4 | Opera Android
Support complet
42
| Safari iOS
Support complet
9.3
| Samsung Internet Android
Support complet
6.0
|
Animations | Chrome Support complet 55 | Edge Aucun support Non | Firefox Support complet 49 | IE Aucun support Non | Opera Support complet 42 | Safari Aucun support Non | WebView Android Support complet 55 | Chrome Android Support complet 55 | Firefox Android Support complet 49 | Opera Android Support complet 42 | Safari iOS Aucun support Non | Samsung Internet Android Support complet 6.0 |
<basic-shape> | Chrome Support complet 23 | Edge Aucun support Non | Firefox
Support complet
54
| IE Aucun support Non | Opera Support complet 15 | Safari Support complet 6.1 | WebView Android Support complet 4.4 | Chrome Android Support complet 25 | Firefox Android
Support complet
54
| Opera Android Support complet 14 | Safari iOS Support complet 6.1 | Samsung Internet Android Support complet 1.5 |
fill-box and stroke-box | Chrome Aucun support Non | Edge Aucun support Non | Firefox
Support complet
51
| IE Aucun support Non | Opera Aucun support Non | Safari Aucun support Non | WebView Android Aucun support Non | Chrome Android Aucun support Non | Firefox Android
Support complet
51
| Opera Android Aucun support Non | Safari iOS Aucun support Non | Samsung Internet Android Aucun support Non |
On HTML elements | Chrome Support complet 23 | Edge Aucun support Non | Firefox Support complet 3.5 | IE Aucun support Non | Opera Support complet 15 | Safari Support complet 6.1 | WebView Android Support complet 4.4 | Chrome Android Support complet 25 | Firefox Android Support complet 4 | Opera Android Support complet 14 | Safari iOS Support complet 6.1 | Samsung Internet Android Support complet 1.5 |
path() | Chrome Aucun support Non | Edge Aucun support Non | Firefox
Support complet
71
| IE Aucun support Non | Opera Aucun support Non | Safari Aucun support Non | WebView Android Aucun support Non | Chrome Android Aucun support Non | Firefox Android
Support complet
63
| Opera Android Aucun support Non | Safari iOS Aucun support Non | Samsung Internet Android Aucun support Non |
On SVG elements | Chrome Support complet 23 | Edge Support complet 12 | Firefox Support complet 52 | IE Support complet 10 | Opera Support complet 15 | Safari Support complet 6.1 | WebView Android Support complet 4.4 | Chrome Android Support complet 25 | Firefox Android Support complet 52 | Opera Android Support complet 14 | Safari iOS Support complet 6.1 | Samsung Internet Android Support complet 1.5 |
Légende
- Support complet
- Support complet
- Aucun support
- Aucun support
- Voir les notes d'implémentation.
- Voir les notes d'implémentation.
- Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
- Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
- Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
- Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.