mask

Baseline 2023
Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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