mask

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

Hinweis: Als Präsentationsattribut hat mask auch ein entsprechendes CSS-Eigenschaftsgegenstück: mask. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.

Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:

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 mask-Attribut als CSS-Eigenschaft definiert und ist ein Shorthand für viele andere Eigenschaften: mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size und mask-composite.

Hinweise zur Verwendung

Wert Siehe die CSS-Eigenschaft mask
Standardwert none
Animierbar Ja

Spezifikationen

Specification
CSS Masking Module Level 1
# the-mask

Browser-Kompatibilität

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.

Siehe auch

  • CSS-Eigenschaft mask