Propriedade mask-type do CSS

Página anterior mask-size
Próxima página max-block-size

Definição e uso

mask-type A propriedade especifica se o elemento <mask> do SVG deve ser tratado como máscara de luminância ou máscara alpha.

Essa propriedade se aplica ao elemento <mask> do SVG.

Exemplo

Veja os dois elementos <mask> do SVG; um usando mask-type: alphae outro usando 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>

Experimente você mesmo

Sintaxe do CSS

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

Valor do atributo

Valor	Descrição
luminance	Trate a imagem de máscara como máscara de luminância. Valor padrão.
alpha	Trate a imagem de máscara como máscara alpha.
initial	Defina essa propriedade como seu valor padrão. Veja initial.
inherit	Herda essa propriedade do elemento pai. Veja inherit.

Detalhes técnicos

Valor padrão:	luminance
Herança:	Não
Produção de animação:	Não suportado. Veja:Atributos relacionados a animação.
Versão:	Módulo de Masking do CSS Nível 1
Sintaxe do JavaScript:	object.style.maskType="alpha"