L'élément SVG <clipPath> définit un détourage. Ce détourage peut par la suite être appliqué sur une forme en utilisant la propriété clip-path.

Le détourage limite la zone dans laquelle l'élément sur lequel il est appliqué sera dessiné. Autrement dit, les parties de l'élément en dehors de la forme créée par le détourage ne seront pas affichées.

<svg viewBox="0 0 100 100">
  <clipPath id="myClip">
    <!-- La forme crée par le détourage est un simple cercle. -->
    <circle cx="40" cy="35" r="35" />
  </clipPath>
 
  <!-- Le coeur sans détourage, pour référence -->
  <path id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />
 
  <!--
    Le coeur avec détourage.
    Seule la partie à l'intérieur du cercle est visible.
  -->
  <use clip-path="url(#myClip)" xlink:href="#heart" fill="red" />
</svg>
/* Animation CSS pour les navigateurs *
 * qui implémentent la propriété de géométrie r. */

@keyframes openYourHeart {from {r: 0} to {r: 60px}}

#myClip circle {
  animation: openYourHeart 15s infinite;
}

Sur le plan conceptuel, un détourage est un peu comme une zone d'affichage personnalisée pour l'élément sur lequel il est appliqué. Cela va limiter la zone dans laquelle l'élément est affiché, sans affecter sa géométrie (position, taille, etc).

La zone de sélection d'un élément détouré (c'est à dire un élément qui référence un <clipPath> via la propriété clip-path, ou un de ses enfant) reste la même, comme s'il n'était pas tronqué.

Par défaut, les événements de pointeur ne sont pas déclenchés sur les régions détourées (non visibles) d'une forme. Par exemple, un cercle avec un rayon de 10 qui est détouré à un cercle de rayon 5, ne recevra pas d'événement "click" en dehors de ce rayon de 5. Ce comportement peut être modifié avec la propriété pointer-events.

Attributs

clipPathUnits
Cet attribut définit le système de coordonnées pour le contenu de l'élément <clipPath>.
ValeuruserSpaceOnUse|objectBoundingBox ; Valeur par défaut: userSpaceOnUse; Animation: oui

Attributs globaux

Attributs de base
Notamment: id
Attributs de style
class, style
Attributs de traitement conditionnel
Notamment: requiredExtensions, systemLanguage
Attributs de présentation
Notamment: clip-path, clip-rule, color, display, fill, fill-opacity, fill-rule, filter, mask, opacity, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility

Notes d'usage

CatégoriesAucune
Contenu autoriséTout élément de cette liste, quel qu'en soit l'ordre:
Éléments d'animation
Éléments descriptifs
Éléments de formes
<text>, <use>

Spécifications

Spécification Statut Commentaire
CSS Masking Module Level 1
La définition de '<clipPath>' dans cette spécification.
Candidat au statut de recommandation  
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de '<clipPath>' dans cette spécification.
Recommendation Définition initiale

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet OuiFirefox Support complet 1.5IE Support complet 9Opera Support complet 9Safari Support complet 3WebView Android Support complet 3Chrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 3Samsung Internet Android ?
clipPathUnitsChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet 9Opera Support complet OuiSafari Support complet 3WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet 3Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : a-mt
Dernière mise à jour par : a-mt,