mask-type

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.

mask-type は CSS のプロパティで、 SVG の <mask> 要素を輝度マスクとアルファマスクのどちらとして扱うかを設定します。これは <mask> 要素自身に設定します。

css

/* キーワード値 */
mask-type: luminance;
mask-type: alpha;

/* グローバル値 */
mask-type: inherit;
mask-type: initial;
mask-type: revert;
mask-type: unset;

このプロパティは、マスクが使用される要素に適用され、同じ効果を持つ mask-mode プロパティによって上書きされることがあります。アルファマスクは全般的に表示が高速です。

構文

mask-type プロパティは以下に示すキーワード値のうちの一つで指定します。

値

luminance: 関連付けられたマスク画像が輝度マスクであることを示すキーワードです。すなわち、適用時に相対輝度値が使用されます。
alpha: 関連付けられたマスク画像がアルファマスクであることを示すキーワードです。すなわち、適用時にアルファチャネル値が使用されます。

公式定義

初期値	`luminance`
適用対象	`<mask>` 要素
継承	なし
計算値	指定通り
アニメーションの種類	離散値

形式文法

mask-type = 
  luminance  |
  alpha

例

アルファマスクの設定

HTML

html

<div class="redsquare"></div>
<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="0"
  height="0">
  <defs>
    <mask id="m" maskContentUnits="objectBoundingBox" style="mask-type:alpha">
      <rect
        x=".1"
        y=".1"
        width=".8"
        height=".8"
        fill="red"
        fill-opacity="0.7" />
    </mask>
  </defs>
</svg>

CSS

css

.redsquare {
  height: 100px;
  width: 100px;
  background-color: rgb(128, 128, 128);
  border: solid 1px black;
  mask: url("#m");
}

結果

輝度マスクの設定

HTML

html

<div class="redsquare"></div>
<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="0"
  height="0">
  <defs>
    <mask
      id="m"
      maskContentUnits="objectBoundingBox"
      style="mask-type:luminance">
      <rect
        x=".1"
        y=".1"
        width=".8"
        height=".8"
        fill="red"
        fill-opacity="0.7" />
    </mask>
  </defs>
</svg>

CSS

css

.redsquare {
  height: 100px;
  width: 100px;
  background-color: rgb(128, 128, 128);
  border: solid 1px black;
  mask: url("#m");
}

結果

仕様書

Specification
CSS Masking Module Level 1 # the-mask-type

ブラウザーの互換性

BCD tables only load in the browser