clip-path

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().

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 avec border-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 par viewBox et les dimensions de la boîte de référence sont les valeurs de hauteur et de largeur de l'attribut viewBox.
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-box
où 
<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
où 
<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>
&lt;svg&gt;
  &lt;clipPath id="myPath" clipPathUnits="objectBoundingBox"&gt;
    &lt;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" /&gt;
  &lt;/clipPath&gt;
&lt;/svg&gt;</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

Update compatibility data on GitHub

	Ordinateur						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Webview Android	Chrome pour Android	Edge Mobile	Firefox pour Android	Opera pour Android	Safari pour iOS	Samsung Internet
Support simple Expérimentale	Chrome Support complet 55 Support complet 55 Support complet 24 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Edge Aucun support Non	Firefox Support complet 3.5	IE Aucun support Non	Opera Support complet 42	Safari Aucun support Non	WebView Android Support complet 55	Chrome Android Support complet 55 Support complet 55 Support complet Oui Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Edge Mobile Aucun support Non	Firefox Android Support complet 4	Opera Android Support complet 42	Safari iOS Aucun support Non	Samsung Internet Android Support complet 6.0 Support complet 6.0 Support complet Oui Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
On SVG elements	Chrome Support complet 55	Edge Support complet 15 Notes Support complet 15 Notes Notes Edge only supports clip paths defined by `url()`.	Firefox Support complet 52	IE Support complet Oui Notes Support complet Oui Notes Notes Internet Explorer only supports clip paths defined by `url()`.	Opera Support complet 42	Safari Aucun support Non	WebView Android Support complet 55	Chrome Android Support complet 55	Edge Mobile Support complet 12 Notes Support complet 12 Notes Notes Edge only supports clip paths defined by `url()`.	Firefox Android Support complet 52	Opera Android Support complet 42	Safari iOS Aucun support Non	Samsung Internet Android Support complet 6.0
`<basic-shape>`	Chrome Support complet 55	Edge Aucun support Non	Firefox Support complet 54 Support complet 54 Aucun support 47 — ? Désactivée Désactivée From version 47: this feature is behind the `layout.css.clip-path-shapes.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE Aucun support Non	Opera Support complet 42	Safari Aucun support Non	WebView Android Support complet 55	Chrome Android Support complet 55	Edge Mobile Aucun support Non	Firefox Android Support complet 54 Support complet 54 Aucun support 47 — ? Désactivée Désactivée From version 47: this feature is behind the `layout.css.clip-path-shapes.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android Support complet 42	Safari iOS Aucun support Non	Samsung Internet Android Support complet 6.0
`path()`	Chrome Aucun support Non	Edge Aucun support Non	Firefox Support complet 63 Désactivée Support complet 63 Désactivée Désactivée From version 63: this feature is behind the `layout.css.clip-path-path.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE Aucun support Non	Opera Aucun support Non	Safari Aucun support Non	WebView Android Aucun support Non	Chrome Android Aucun support Non	Edge Mobile Aucun support Non	Firefox Android Support complet 63 Désactivée Support complet 63 Désactivée Désactivée From version 63: this feature is behind the `layout.css.clip-path-path.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android Aucun support Non	Safari iOS Aucun support Non	Samsung Internet Android Aucun support Non
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	Edge Mobile Aucun support Non	Firefox Android Support complet 49	Opera Android Support complet 42	Safari iOS Aucun support Non	Samsung Internet Android Support complet 6.0
`fill-box` and `stroke-box`	Chrome Aucun support Non	Edge Aucun support Non	Firefox Support complet 51 Notes Support complet 51 Notes Notes This value was supported before Firefox 51, but as an alias to `border-box`.	IE Aucun support Non	Opera Aucun support Non	Safari Aucun support Non	WebView Android Aucun support Non	Chrome Android Aucun support Non	Edge Mobile Aucun support Non	Firefox Android Support complet 51 Notes Support complet 51 Notes Notes This value was supported before Firefox 51, but as an alias to `border-box`.	Opera Android ?	Safari iOS Aucun support Non	Samsung Internet Android Aucun support Non

Légende

Support complet: Support complet
Aucun support: Aucun support
Compatibilité inconnue: Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.: Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
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.

Voir aussi

mask
filter
Appliquer des effets SVG sur du contenu HTML
Les formes CSS, le clipping et le masking : comment les utiliser (article en anglais)
L'attribut SVG clip-path
L'attribut SVG clip-rule