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> elements
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序構文通り

構文

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 の定義
勧告候補 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
mask-typeChrome 完全対応 24Edge 未対応 なしFirefox 完全対応 35
完全対応 35
未対応 20 — 52
無効
無効 From version 20 until version 52 (exclusive): this feature is behind the layout.css.masking.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 15Safari 完全対応 6.1WebView Android 完全対応 37Chrome Android 完全対応 25Firefox Android 完全対応 35
完全対応 35
未対応 20 — 52
無効
無効 From version 20 until version 52 (exclusive): this feature is behind the layout.css.masking.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 14Safari iOS 完全対応 7Samsung Internet Android 完全対応 1.5

凡例

完全対応  
完全対応
未対応  
未対応
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報

  • その他のマスクに関するプロパティ: mask, mask-mode