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 |
---|---|
適用対象 | <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