mask-type

Das Attribut mask-type gibt an, welcher Maskenmodus, alpha oder luminance, beim Maskieren für den Inhalt des Elements <mask> verwendet wird.

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

<mask>

Hinweis: Dieses Präsentationsattribut hat eine entsprechende CSS-Eigenschaft: mask-type. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.

mask

Für <mask> legt mask-type fest, ob der Inhalt des Maskenelements als Luminanzmaske oder als Alphamaske behandelt wird.

Wert	`alpha` \| `luminance`
Standardwert	`luminance`
Animierbar	Diskret

alpha: Dieser Wert gibt an, dass die Alphawerte des Elements <mask> verwendet werden sollen. Die Pixel des maskierten Objekts entsprechen der Deckkraft der Maskenbereiche, unabhängig von der Luminanz der Maskenfarben.
luminance: Dieser Wert gibt an, dass die Luminanzwerte des Elements <mask> verwendet werden sollen. Die Deckkraft des maskierten Objekts hängt von der Deckkraft und Helligkeit der Maske ab. Die Deckkraft einer luminance-Maske wird anhand der Kanäle R, G, B und A der Maske mit der Gleichung ((0.2125 * R) + (0.7154 * G) + (0.0721 * B)) * A bestimmt.

Beispiel

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

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Two identical masks other than the id and mask-type values -->
  <mask id="myMask1" mask-type="alpha">
    <rect
      fill="rgb(10% 10% 10% / 0.4)"
      x="0"
      y="0"
      width="100%"
      height="100%" />
    <circle fill="rgb(90% 90% 90% / 0.6)" cx="50" cy="50" r="35" />
  </mask>

  <mask id="myMask2" mask-type="luminance">
    <rect
      fill="rgb(10% 10% 10% / 0.4)"
      x="0"
      y="0"
      width="100%"
      height="100%" />
    <circle fill="rgb(90% 90% 90% / 0.6)" cx="50" cy="50" r="35" />
  </mask>

  <!-- The first rect is masked with an alpha mask -->
  <rect x="0" y="0" width="45" height="45" mask="url(#myMask1)" fill="red" />

  <!-- The last rect is masked with a luminance mask -->
  <rect x="55" y="0" width="45" height="45" mask="url(#myMask2)" fill="red" />
</svg>

Spezifikationen

Diese Funktion scheint in keiner Spezifikation definiert zu sein.

Browser-Kompatibilität

Siehe auch

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