mask

L'attribut mask est un attribut de présentation principalement utilisé pour appliquer un trou (défini par un élément <mask>) sur l'élément qui possède cet attribut.

Note: On peut aussi utiliser l'attribut mask en CSS.

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <mask id="monMask" maskContentUnits="objectBoundingBox">
    <rect    fill="white" x="0" y="0" width="100%" height="100%" />
    <polygon fill="black" points="0.5,0.2 0.68,0.74 0.21,0.41 0.79,0.41 0.32,0.74" />
  </mask>

  <!-- Fait un trou de la forme d'une étoile sur le cercle rouge, 
  ce qui laisse apparaître le cercle jaune situé dessous. -->
  <circle cx="50" cy="50" r="20" fill="yellow" />
  <circle cx="50" cy="50" r="45" fill="red"
          mask="url(#monMask)"/>
</svg>

Depuis SVG2, l'attribut mask est défini comme une propriété CSS et comme une propriété raccourcie pour beaucoup d'autres propriétés: mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size et mask-composite.

Étant un attribut de présentation, il peut être appliqué sur n'importe quel élément, mais il a un effet visible surtout sur les éléments suivants: <a>, <circle>, <clipPath>, <ellipse>, <g>, <glyph>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <symbol>, <text> et <use>.

Contexte d'utilisation

Valeur Voir la propriété CSS mask
Valeur par défaut none
Animable Oui

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
maskChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Compatibilité inconnue  
Compatibilité inconnue

Spécifications

Spécification Status Commentaire
CSS Masking Module Level 1
La définition de 'mask' dans cette spécification.
Candidat au statut de recommandation

Étend cet usage pour les éléments HTML en créant un raccourci pour les nouvelles propriétés mask-* défini dans cette spécification.

Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de 'mask' dans cette spécification.
Recommendation Définition initiale