mask

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Dezember 2023 browserübergreifend verfügbar.

Mehr erfahren
Vollständige Kompatibilität anzeigen

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

Spezifikation
CSS Masking Module Level 1 # the-mask

Browser-Kompatibilität

Siehe auch

CSS mask Eigenschaft

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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