<mask>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

Das <mask> SVG-Element definiert eine Maske für die Zusammensetzung des aktuellen Objekts mit dem Hintergrund. Eine Maske wird mit der mask-Eigenschaft und der CSS mask-image-Eigenschaft verwendet/referenziert.

Verwendungskontext

Kategorien	Container-Element
Erlaubter Inhalt	Beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge: Animationselemente Beschreibende Elemente Formelemente Strukturelemente Gradient-Elemente `<a>`, `<clipPath>`, `<filter>`, `<foreignObject>`, `<image>`, `<marker>`, `<mask>`, `<pattern>`, `<script>`, `<style>`, `<switch>`, `<text>`, `<view>`

Attribute

height: Dieses Attribut definiert die Höhe des Maskierungsbereichs. Wertetyp: <length>; Standardwert: 120%; Animierbar: ja
mask-type: Dieses Attribut definiert den Maskenmodus für den Inhalt des <mask>. Wertetyp: alpha | luminance; Standardwert: luminance; Animierbar: ja
maskContentUnits: Dieses Attribut definiert das Koordinatensystem für den Inhalt des <mask>. Wertetyp: userSpaceOnUse | objectBoundingBox; Standardwert: userSpaceOnUse; Animierbar: ja
maskUnits: Dieses Attribut definiert das Koordinatensystem für die Attribute x, y, width und height auf dem <mask>. Wertetyp: userSpaceOnUse | objectBoundingBox; Standardwert: objectBoundingBox; Animierbar: ja
x: Dieses Attribut definiert die x-Achsen-Koordinate der oberen linken Ecke des Maskierungsbereichs. Wertetyp: <coordinate>; Standardwert: -10%; Animierbar: ja
y: Dieses Attribut definiert die y-Achsen-Koordinate der oberen linken Ecke des Maskierungsbereichs. Wertetyp: <coordinate>; Standardwert: -10%; Animierbar: ja
width: Dieses Attribut definiert die Breite des Maskierungsbereichs. Wertetyp: <length>; Standardwert: 120%; Animierbar: ja

DOM-Schnittstelle

Dieses Element implementiert die SVGMaskElement-Schnittstelle.

Beispiel

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="-10 -10 120 120">
  <rect x="-10" y="-10" width="120" height="120" fill="blue" />
  <mask id="myMask" mask-type="luminance">
    <!-- Everything under a white pixel will be visible -->
    <rect x="0" y="0" width="100" height="100" fill="white" />

    <!-- Everything under a black pixel will be invisible -->
    <path
      d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
      fill="black" />
  </mask>

  <polygon points="-10,110 110,110 110,-10" fill="orange" />

  <!-- with this mask applied, we "punch" a heart shape hole into the circle -->
  <circle cx="50" cy="50" r="50" fill="purple" mask="url(#myMask)" />
</svg>

Spezifikationen

Specification
CSS Masking Module Level 1 # MaskElement

Browser-Kompatibilität

Siehe auch

CSS mask-type-Eigenschaft
Andere SVG-Elemente für Ausschnitte und Maskierungen: <clipPath>
CSS-Eigenschaften für Ausschnitte und Maskierungen: mask, mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-composite, mask-size

Help improve MDN

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

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