mask-type

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

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

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

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

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

構文

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

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

形式文法

luminance | alpha

以下の長方形をマスクとして適用してみましょう。

<rect x="10" y="10" width="80" height="80"
    fill="red" fill-opacity="0.7" />
このような正方形になります。

適用先はこちらです。

結果として、ブラウザーがこのプロパティに対応している場合、 mask-type<mask> 要素に適用されると2つの異なる四角形になります。

mask-type: alpha; mask-type: luminance;

仕様書

仕様書 状態 備考
CSS Masking Module Level 1
mask-type の定義
勧告候補 初回定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報