CSS mask-type Eigenschaft

Definition und Verwendung

mask-type Diese Eigenschaft legt fest, ob das SVG <mask>-Element als Helligkeitsmaskierung oder als Alpha-Maskierung behandelt wird.

Diese Eigenschaft gilt für das SVG <mask>-Element selbst.

Beispiel

Betrachten Sie zwei SVG <mask>-Elemente; eines, das mask-type: alphaund einer anderen, die mask-type: luminance:

<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
  </defs>
    <mask id="mask1" maskContentUnits="objectBoundingBox" style="mask-type:alpha">
      <rect width="10" height="10" fill="red" fill-opacity="0.7" />
    </mask>
    <mask id="mask2" maskContentUnits="objectBoundingBox" style="mask-type:luminance">
      <rect width="10" height="10" fill="red" fill-opacity="0.7" />
    </mask>
  </defs>
</svg>

Versuchen Sie es selbst

CSS-Syntax

mask-type: luminance|alpha|initial|inherit;

Eigenschaftswert

Wert Beschreibung
luminance Das Maskierungsimage als Helligkeitsmaskierung betrachten. Standardwert.
alpha Das Maskierungsimage als Alpha-Maskierung betrachten.
initial Diese Eigenschaft auf ihren Standardwert setzen. Siehe: initial.
inherit Diese Eigenschaft wird von ihrem übergeordneten Element geerbt. Siehe: inherit.

Technische Details

Standardwert: luminance
Vererbbarkeit: Nein
Animationserstellung: Nicht unterstützt. Siehe:Animationsspezifische Attribute.
Version: CSS Masking Module Level 1
JavaScript-Syntax: object.style.maskType="alpha"

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die Versionsnummer der ersten Browser dar, die diese Eigenschaft vollständig unterstützen.

Chrome Edge Firefox Safari Opera
24 79 35 7 15

Verwandte Seiten

Tutorial:CSS-Abdeckung

Referenz:CSS mask Eigenschaft

Referenz:CSS mask-clip Eigenschaft

Referenz:CSS mask-composite Eigenschaft

Referenz:CSS mask-image Eigenschaft

Referenz:CSS mask-mode Eigenschaft

Referenz:CSS mask-origin Eigenschaft

Referenz:CSS mask-position Eigenschaft

Referenz:CSS mask-repeat Eigenschaft

Referenz:CSS mask-size Eigenschaft