L'élément <mask> définit un masque alpha. Ce masque peut par la suite être appliqué sur une forme en utilisant la propriété mask.

Le masque permet de rendre des zones de l'élément sur lequel est appliqué (semi-)transparentes. On peut par exemple créer un effet de fondu en utilisant un dégradé, ce que le détourage (<clipPath>) ne permet pas.

<svg viewBox="-10 -10 120 120">
  <mask id="myMask">
    <!-- Tous les pixels blancs sont visibles -->
    <rect x="0" y="0" width="100" height="100" fill="white" />

    <!-- Tous les pixels noirs sont invisibles -->
    <path d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z" fill="black" />
  </mask>
 
  <polygon points="-10,110 110,110 110,-10" fill="orange" />

  <!-- Avec ce masque, on "perfore" un trou en forme de coeur à l'intérieur du cercle -->
  <circle cx="50" cy="50" r="50" mask="url(#myMask)" />
</svg>

Attributs

height
Définit la hauteur du masque.
Valeur: <length> ; Valeur par défaut: 120%; Animation: oui
maskContentUnits
Définit le système de coordonnées pour le contenu du <mask>.
Valeur: userSpaceOnUse|objectBoundingBox ; Valeur par défaut: userSpaceOnUse; Animation: oui
maskUnits
Définit le système de coordonnées pour les attributs x, y, width et height du <mask>.
Valeur: userSpaceOnUse|objectBoundingBox ; Valeur par défaut: objectBoundingBox; Animation: oui
x
Définit la coordonnée de l'axe x du coin supérieur gauche du masque.
Valeur: <coordinate> ; Valeur par défaut: -10%; Animation: oui
y
Définit la coordonnée de l'axe y du coin supérieur gauche du masque.
Valeur: <coordinate> ; Valeur par défaut: -10%; Animation: oui
width
Définit la largeur du masque.
Valeur: <length> ; Valeur par défaut: 120%; 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égoriesÉlément conteneur
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
Éléments structurels
Eléments de dégradés
<a>, <altGlyphDef>, <clipPath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

Spécifications

Spécification Statut Commentaire
CSS Masking Module Level 1
La définition de '<mask>' dans cette spécification.
Candidat au statut de recommandation  
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de '<mask>' 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 sur iOSSamsung Internet
Support simpleChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android ?
maskUnitsChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
maskContentUnitsChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
xChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android ?
yChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android ?
heightChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android ?
widthChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : a-mt, ylerjen, Sebastianz, SphinxKnight
Dernière mise à jour par : a-mt,