Atributo mask-type de CSS

Definición y uso

mask-type Este atributo especifica si el elemento <mask> de SVG se maneja como una máscara de luminancia o como una máscara alpha.

Esta propiedad se aplica al elemento <mask> de SVG en sí.

Ejemplo

Mire los dos elementos <mask> de SVG; uno usa mask-type: alphay el otro usa 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>

Prueba por tu cuenta

Sintaxis de CSS

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

Valor del atributo

Valor Descripción
luminance Considera la imagen de la máscara como una máscara de luminancia. Valor predeterminado.
alpha Considera la imagen de la máscara como una máscara alpha.
initial Establece este atributo en su valor predeterminado. Ver: initial.
inherit Hereda este atributo de su elemento padre. Ver: inherit.

Detalles técnicos

Valor predeterminado: luminance
Herencia: No
Producción de animación: No se admite. Consulte:Atributos relacionados con la animación.
Versión: Módulo de Máscara CSS Nivel 1
Sintaxis de JavaScript: object.style.maskType="alpha"

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que primero completamente admite esta propiedad.

Chrome Edge Firefox Safari Opera
24 79 35 7 15

Páginas relacionadas

Tutoriales:Máscara de CSS

Referencia:Atributo mask de CSS

Referencia:Atributo mask-clip de CSS

Referencia:Atributo mask-composite de CSS

Referencia:Atributo mask-image de CSS

Referencia:Atributo mask-mode de CSS

Referencia:Atributo mask-origin de CSS

Referencia:Atributo mask-position de CSS

Referencia:Atributo mask-repeat de CSS

Referencia:Atributo mask-size de CSS