<mask>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Das <mask> SVG-Element definiert eine Alphamaske für das Komponieren des aktuellen Objekts in den Hintergrund. Eine Maske wird mithilfe der mask-Eigenschaft verwendet/referenziert.

Beispiel

html
<svg viewBox="-10 -10 120 120">
  <rect x="-10" y="-10" width="120" height="120" fill="blue" />
  <mask id="myMask">
    <!-- 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>

Attribute

height

Dieses Attribut definiert die Höhe des Maskierungsbereichs. Wertetyp: <length> ; Standardwert: 120%; Animierbar: ja

maskContentUnits

Dieses Attribut definiert das Koordinatensystem für den Inhalt der <mask>. Wertetyp: userSpaceOnUse|objectBoundingBox ; Standardwert: userSpaceOnUse; Animierbar: ja

maskUnits

Dieses Attribut definiert das Koordinatensystem für die Attribute x, y, width und height auf der <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

Nutzungskontext

KategorienContainer-Element
Erlaubter InhaltBeliebige Anzahl folgender Elemente, in beliebiger Reihenfolge:
Animationselemente
Beschreibende Elemente
Formelemente
Strukturelemente
Gradient-Elemente
<a>, <clipPath>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

Spezifikationen

Specification
CSS Masking Module Level 1
# MaskElement

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch