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,
body,
svg {
  height: 100%;
}

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

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden