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.

Das mask Attribut ist ein Präsentationsattribut, das hauptsächlich verwendet wird, um ein gegebenes <mask> Element mit dem Element zu verbinden, zu dem das Attribut gehört.

Hinweis: Als Präsentationsattribut hat mask auch ein entsprechendes CSS-Property: mask. Wenn beide angegeben sind, hat das CSS-Property Vorrang.

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

Beispiel

html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <mask id="myMask" 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>

  <!--
  Punch a hole in a shape of a star inside the red circle,
  revealing the yellow circle underneath
  -->
  <circle cx="50" cy="50" r="20" fill="yellow" />
  <circle cx="50" cy="50" r="45" fill="red" mask="url(#myMask)" />
</svg>

Seit SVG2 wird das Attribut mask als CSS-Property definiert und ist eine Kurzform für viele andere Eigenschaften: mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size und mask-composite.

Anwendungshinweise

Wert Siehe die CSS-Eigenschaft mask
Standardwert none
Animierbar Ja

Spezifikationen

Specification
CSS Masking Module Level 1
# the-mask

Browser-Kompatibilität

Siehe auch

  • CSS mask Eigenschaft