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.

Exemple

html
<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

Spécifications

Specification
CSS Masking Module Level 1
# the-mask

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
mask

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.