<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

Spezifikationen

Specification
CSS Masking Module Level 1
# MaskElement

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
height
maskContentUnits
maskUnits
systemLanguage
width
x
y

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch