CSSマスキングモジュール レベル1

1. はじめに

この節は規範的ではない。

この仕様は、オブジェクトの一部を完全または部分的に隠す 2 つの異なるグラフィック操作、 すなわちクリッピングとマスキングを定義する。

1.1. クリッピング

閉じたベクターパス、形状、または多角形は、いわゆるクリッピングパスを定義する。このクリッピングパスは、 （アンチエイリアシングがない場合）領域の「内側」にあるすべてのものを表示できる一方で、 外側にあるすべてのものを「切り取り」、キャンバス上に表示しない領域である。

クリッピングパス（中央）が、異なる色で塗られた多角形（左）に適用される。 その結果、「切り取られた」形状（右）が生成される。

clip-path プロパティは、指定された基本シェイプをクリッピングパスとして使用するか、 クリッピングパスとして使用するclipPath 要素をグラフィックス 要素とともに参照できる。

1.2. マスキング

グラフィックオブジェクトにマスクを適用する効果は、そのグラフィックオブジェクトがマスクを通して 背景上に描画され、グラフィックオブジェクトの一部が完全または部分的に覆い隠されるかのようなものである。

輝度マスク（中央）が、グラデーションで塗りつぶされた形状（左）に適用される。その 結果、マスクされた形状（右）が生成される。

マスクは、mask-image または mask-border-source プロパティを使用して適用される。

mask-image プロパティは、mask 要素を参照できる。mask 要素の内容がマスクとして機能する。

また、多くの単純な用途では、mask-image プロパティからマスクとして使用する画像を直接参照できるため、 明示的な mask 要素は必要ない。このマスクは、mask-position、mask-size および その他の特性を定めるプロパティを使用して、CSS 背景画像と同様にサイズ指定および配置できる。

mask-border-source プロパティは、マスクを 9 つの部分に分割する。 各部分は、マスクボーダー 画像領域のサイズに合わせて、さまざまな方法で切り分け、拡大縮小、および引き伸ばすことができる。mask-border プロパティは、mask-border-source およびその他の 特性を定めるプロパティの略式プロパティとして機能する。

mask プロパティは、すべての mask-border および mask-image 関連プロパティの略式プロパティとして機能する。

注記：マスキングは、グラフィック効果を強化するための多くの可能性を提供し、 一般にコンテンツの「可視部分」をより細かく制御できるが、クリッピングパスの方が 高い性能を発揮でき、基本シェイプの方が補間しやすい。

2. モジュール間の 相互作用

この仕様は、適用対象となる要素の視覚的レンダリングに影響を与える一連の CSS プロパティを定義する。 これらの効果は、視覚 整形モデル [CSS21]に従って要素のサイズと位置が 決定された後に適用される。これらのプロパティの一部の値により、重ね合わせ コンテキストが作成される。さらに、この仕様は、 [CSS21] の節 クリッピング：clip プロパティを 置き換える。

合成モデルは SVG の合成モデル [SVG11] に従う。まず、フィルター効果、マスキング、 クリッピング、および不透明度がない状態で要素にスタイルが適用される。次に、要素とその子孫が一時キャンバス上に描画される。最後の手順で、 次の効果が要素に順番に適用される：フィルター効果 [FILTER-EFFECTS]、クリッピング、マスキング、および不透明度。

この仕様では、CSS Compositing and Blending [COMPOSITING-1] で定義された Porter-Duff 合成演算子を使用して、複数のマスクレイヤーを合成できる。

用語オブジェクト境界ボックスは、SVG 1.1 [SVG11] の定義に従う。

3. 値

この仕様は、CSS プロパティの 定義規則 [CSS21] に従う。基本 シェイプは CSS Shapes Module Level 1 [CSS-SHAPES] で定義される。これらの仕様で定義されていない値型は、 CSS Values and Units Module Level 3 [CSS3VAL] で定義される。

各定義に列挙されたプロパティ固有の値に加えて、この仕様で定義されるすべてのプロパティは、 inherit などの CSS 全域キーワードもプロパティ値として受け入れる [CSS3VAL]。可読性のため、これは 明示的に繰り返し記載されていない。

4. 用語

この仕様における CSS プロパティおよび値の定義は、CSS Backgrounds and Borders [CSS3BG] の定義に類似している。重複を避けるため、 この仕様は CSS Backgrounds and Borders の説明および定義に依存する。CSS Backgrounds and Borders の次の 用語は、この仕様において次の意味を持つ：

5. クリッピングパス

クリッピングパスは、描画を適用できる領域、いわゆるクリッピング領域を制限する。概念上、この領域の 外側にある描画部分は描画されない。これには、クリッピングパスが適用される要素およびその子孫の すべてのコンテンツ、背景、ボーダー、テキスト装飾、アウトライン、および可視のスクロール機構が 含まれる。

要素の祖先も、そのコンテンツの一部をクリップする場合がある（たとえば、それ自身の clip または clip-path プロパティを介する場合、および／またはその overflow プロパティが visible ではない場合）。レンダリングされるものは、これらの累積的な共通部分となる。

クリッピング領域が UA の文書ウィンドウの境界を超える場合、ネイティブの動作環境によって コンテンツがそのウィンドウに合わせてクリップされる場合がある。

クリッピングパスは要素のレンダリングに影響するが、要素固有の幾何形状には影響しない。クリップされた要素 （すなわち、clipPath 要素を clip-path プロパティで参照する要素、または その参照元要素の子）の幾何形状は、 クリップされていない場合と同じままでなければならない。

<g clip-path="circle()">
  <path id="shape" d="M0,0 L10,10, L 20,0 z"/>
</g>

<use xlink:href="#shape"/>

既定では、クリップされた（不可視の）形状領域では、pointer-events を配送してはならない。たとえば、10px × 10px の寸法を持ち、 半径 5px の円にクリップされた要素は、クリッピング領域の外側では click イベントを受信しない。

5.1. クリッピング形状：clip-path プロパティ

基本シェイプを指定するか、clipPath 要素を参照して、クリッピングパスを作成する。

<clip-source> = <url>

<geometry-box> = <shape-box> | fill-box | stroke-box | view-box

関連付けられた CSS レイアウトボックスを持たない SVG 要素では、使用値は、content-box および padding-box に対しては fill-box となり、 border-box および margin-box に対しては stroke-box となる。

関連付けられた CSS レイアウトボックスを持つ要素では、使用値は、fill-box に対しては content-box となり、 stroke-box および view-box に対しては border-box となる。

none 以外の算出値により、CSS の 重ね合わせ コンテキスト [CSS21] が作成される。これは、CSS の opacity [CSS3COLOR] が 1 以外の値に対して行う場合と同様である。

URI 参照が有効でない場合（たとえば、存在しないオブジェクトを指しているか、そのオブジェクトが clipPath 要素でない場合）、クリッピングは適用されない。

clip-path: polygon(15px 99px, 30px 87px, 65px 99px, 85px 55px,
        122px 57px, 184px 73px, 198px 105px, 199px 150px,
        145px 159px, 155px 139px, 126px 120px, 112px 138px,
        80px 128px, 39px 126px, 24px 104px);

clip-path: url("#clip1");

<clipPath id="clip1">
    <polygon points="15,99 30,87 65,99 85,55 122,57 184,73 198,105
        199,150 145,159 155,139 126,120 112,138 80,128 39,126 24,104"/>
</clipPath>

clip-path プロパティは、SVG 要素のプレゼンテーション 属性である。

6. SVG クリッピングパスのソース

6.1. clipPath 要素

属性の定義：

clipPathUnits = "userSpaceOnUse | objectBoundingBox"

clipPath の内容に使用する座標系を定義する。

userSpaceOnUse

clipPath の内容は、clipPath 要素が参照された時点で有効な現在のユーザー座標系の値を表す（すなわち、 clip-path プロパティを介して clipPath 要素を参照する要素の ユーザー座標系）。

objectBoundingBox

座標系の原点は、クリッピングパスが適用される要素の境界ボックスの 左上隅にあり、この境界 ボックスと同じ幅および高さを持つ。ユーザー座標は、 CSS の px 単位と同等のサイズになる。

clipPathUnits 属性が指定されていない場合、 userSpaceOnUse の値が指定されたかのように動作する。

アニメーション可能：はい。

CSS プロパティは、その祖先から clipPath 要素へ継承される。プロパティは、clipPath 要素を参照する要素からは継承されない。

clipPath 要素は直接レンダリングされることはなく、clip-path プロパティを使用して参照できるものとしてのみ使用される。display プロパティは clipPath 要素には適用されない。そのため、display プロパティが none 以外の値に設定されている場合でも、clipPath 要素は直接レンダリングされない。また、clipPath 要素またはその祖先の display プロパティが none に設定されている場合でも、clipPath 要素は参照できる。

clipPath 要素には、path 要素、text 要素、基本シェイプ（circle など）、または use 要素を含めることができる。use 要素が clipPath 要素の子である場合、その要素は path、text、または 基本シェイプ要素を直接参照しなければならない。間接参照はエラーであり、clipPath 要素を無視しなければならない。

Firefox は、内容モデルに 違反する clipPath を参照する要素のレンダリングを無効にする。間接参照を持つ use において clipPath を無視するブラウザーはない。 <https://github.com/w3c/csswg-drafts/issues/17>

clipPath 内の各子要素について、fill、stroke、 stroke-width などのレンダリングプロパティを除いた生の幾何形状は、概念上、 その要素に関連付けられたグラフィックスのシルエットを表す 1 ビットマスク（幾何形状の辺に沿った アンチエイリアシングを除く場合がある）を定義する。オブジェクトの輪郭の外側にあるものはすべて マスクされる。子要素が display または visibility によって不可視にされている場合、その要素はクリッピングパスに寄与しない。 clipPath 要素が複数の子要素を含む場合、 子要素のシルエットは論理 OR で結合され、単一のシルエットが作成される。そのシルエットを使用して、 描画を適用できる領域が制限される。したがって、点が clipPath のいずれかの子の内側にあれば、その点はクリッピングパスの内側にある。

生の幾何形状に 影響する CSS プロパティとの関係を考慮して、生の幾何形状を定義する。特にテキストについて。 <https://github.com/w3c/csswg-drafts/issues/170>

特定のグラフィックス要素に対して実際に使用されるクリッピングパスは、その clip-path プロパティで指定されたクリッピングパス（存在する場合）と、 新しいビューポートを確立する要素の clip-path プロパティで指定された、祖先上のすべての クリッピングパスとの共通部分となる。（[SVG11] を参照）

いくつかの補足：

• clipPath 要素自体およびその子要素は、 clipPath 要素の祖先からクリッピングパスを 継承しない。

• clipPath 要素またはその任意の子は、 clip-path プロパティを指定できる。
  有効な clip-path 参照が clipPath 要素に配置された場合、結果のクリッピングパスは、 clipPath 要素の内容と 参照されたクリッピングパスとの共通部分となる。
  有効な clip-path 参照が clipPath 要素の子の 1 つに配置された場合、指定された子要素は、 その子要素のシルエットを他の子要素のシルエットと OR 結合する前に、 参照されたクリッピングパスによってクリップされる。

• 空のクリッピングパスは、clip-path プロパティが 適用された要素を完全に切り取る。

6.2. 巻き数規則：clip-rule プロパティ

clip-rule プロパティは、クリッピング領域をグラフィックス 要素で作成する際に、特定の点が形状の内側にあるかどうかを判定するために使用する アルゴリズムを示す。アルゴリズムおよび clip-rule 値の定義は、fill-rule プロパティの定義に従う。SVG 1.1 「塗りつぶしプロパティ」節 [SVG11]を参照されたい。

nonzero

fill-rule プロパティの説明 [SVG11]を参照されたい。

evenodd

fill-rule プロパティの説明 [SVG11]を参照されたい。

clip-rule プロパティは、clipPath 要素内に含まれるグラフィックス 要素にのみ適用される。

注記：clip-rule プロパティは、<basic-shape>には適用されない。

<g clip-rule="nonzero">
  <clipPath id="MyClip">
    <path d="..." clip-rule="evenodd" />
  </clipPath>
  <rect clip-path="url(#MyClip)" ... />
</g>

<g clip-rule="nonzero">
  <clipPath id="MyClip">
    <path d="..." />
  </clipPath>
  <rect clip-path="url(#MyClip)" clip-rule="evenodd" ... />
</g>

clip-rule プロパティは、SVG 要素のプレゼンテーション 属性である。

7. 配置されたマスク

7.1. マスク画像のソース：mask-image プロパティ

このプロパティは、要素のマスク レイヤー画像を設定する。定義は次のとおり：

<mask-reference> = none | <image> | <mask-source>

<mask-source> = <url>

<url>

mask 要素（たとえば url(commonmasks.svg#mask)）または CSS 画像への URL 参照。

none

none の値は、透明な黒色の画像レイヤーとして扱われる。

none 以外の算出値により、CSS の 重ね合わせ コンテキスト [CSS21] が作成される。これは、CSS の opacity [CSS3COLOR] が 1 以外の値に対して行う場合と同様である。

空の画像（幅または高さがゼロ）である、ダウンロードに失敗した、 mask 要素への参照ではない、存在しない、または表示できない（たとえば、対応する画像形式でない）マスク参照も、 透明な黒色の画像レイヤーとして扱われる。

マスクレイヤー画像の処理方法については、「マスク処理」の節を参照されたい。

注記：<mask-reference>のリスト内にある none の値は、 mask-composite で指定された使用中の合成演算子に応じて、マスキング操作に影響を与える場合がある。

注記：<mask-source> はマスクレイヤーとして扱われ、 反復可能な <mask-reference> リスト内で、<image> またはさらに別の <mask-source> リスト項目と組み合わせることができる。

注記：要素は mask-border-source でもマスクできる。このプロパティと mask-image との相互作用については、mask-border-source を参照されたい。

body { mask-image: linear-gradient(black 0%, transparent 100%) }
p { mask-image: none }
div { mask-image: url(resources.svg#mask2) }

mask-image が、コンマで区切られた他のマスクプロパティと どのように相互作用して各マスクレイヤーを形成するかについては、「複数のマスクレイヤー画像の重ね合わせ」の節を参照されたい。

7.2. マスク画像の解釈：mask-mode プロパティ

mask-mode プロパティは、<mask-reference> を輝度マスクとアルファマスクのどちらとして扱うかを示す。 （マスク処理を参照）

<masking-mode> = alpha | luminance | match-source

各値には次の意味がある：

alpha

alpha の値は、マスクレイヤー 画像のアルファ値をマスク値として使用する必要があることを示す。マスク値の 計算を参照されたい。

luminance

luminance の値は、マスクレイヤー画像の輝度値を マスク値として使用する必要があることを示す。マスク値の計算を参照されたい。

match-source

mask-image プロパティの <mask-reference> が mask 要素を参照する <mask-source> 型である場合、その要素の mask-type プロパティで指定された値を使用しなければならない。

mask-image プロパティの <mask-reference> が <image> 型である場合、 マスクレイヤー 画像のアルファ値を マスク値として使用する必要がある。

<mask id="SVGMask" mask-type="alpha" maskContentUnits="objectBoundingBox">
  <radialGradient id="radialFill">
    <stop stop-color="white" offset="0"/>
    <stop stop-color="black" offset="1"/>
  </radialGradient>
  <circle fill="url(#radialFill)" cx="0.5" cy="0.5" r="0.5"/>
</mask>

<style>
  rect {
    mask-image: url(#SVGMask);
    mask-mode: luminance;
  }
</style>

<rect width="200" height="200" fill="green"/>

mask-mode が、 コンマで区切られた他のマスクプロパティとどのように相互作用して各マスクレイヤーを形成するかについては、「複数のマスクレイヤー画像の重ね合わせ」の節を参照されたい。

7.3. マスク画像のタイル配置：mask-repeat プロパティ

マスクレイヤー 画像のサイズが決定され、配置された後、それらをどのようにタイル配置するかを指定する。

プロパティ値の定義については、background-repeat プロパティ [CSS3BG]を参照されたい。

body {
    background-color: blue;
    mask-image: url(dot-mask.png) luminance;
    mask-repeat: space;
}

mask-repeat が、 コンマで区切られた他のマスクプロパティとどのように相互作用して各マスクレイヤーを形成するかについては、「複数のマスクレイヤー画像の重ね合わせ」の節を参照されたい。

7.4. マスク画像の配置：mask-position プロパティ

プロパティ値の定義については、background-position プロパティ [CSS3BG]を参照されたい。

body {
    mask-image: url("logo.png");
    mask-position: 100% 100%;
    mask-repeat: no-repeat;
}

mask-position: right 3em bottom 10px

mask-position が、 コンマで区切られた他のマスク プロパティとどのように相互作用して各マスクレイヤーを形成するかについては、「複数のマスクレイヤー画像の重ね合わせ」の節を参照されたい。

7.5. マスキング領域：mask-clip プロパティ

mask 要素を参照しないマスクレイヤー画像の場合、 mask-clip はマスク描画領域を決定する。 この領域によって、マスクの影響を受ける範囲が決定される。要素の描画済みコンテンツは、 この領域に制限されなければならない。

mask-clip プロパティは、mask 要素を参照するマスクレイヤー画像には影響しない。mask 要素の x、 y、 width、height および maskUnits 属性によって、マスク参照のマスク描画領域が決定される。

各値には次の意味がある：

content-box

描画済みコンテンツは、コンテンツボックスに制限される（クリップされる）。

padding-box

描画済みコンテンツは、パディングボックスに制限される（クリップされる）。

border-box

描画済みコンテンツは、ボーダーボックスに制限される（クリップされる）。

fill-box

描画済みコンテンツは、オブジェクト境界ボックスに制限される（クリップされる）。

stroke-box

描画済みコンテンツは、ストローク境界ボックスに制限される（クリップされる）。

view-box

最も近い SVG ビューポートを 参照ボックスとして使用する。

viewBox 属性が、SVG ビューポートを作成する要素に指定されている場合：

• 参照ボックスは、viewBox 属性によって確立された座標系の原点に配置される。

• 参照ボックスの寸法は、viewBox 属性の width 値および height 値に設定される。

no-clip

描画済みコンテンツは制限されない（クリップされない）。

関連付けられた CSS レイアウトボックスを持たない SVG 要素では、使用値は、 content-box および padding-box に対しては fill-box に算出され、border-box および margin-box に対しては stroke-box に算出される。

関連付けられた CSS レイアウトボックスを持つ要素では、使用値は、 fill-box に対しては content-box に算出され、 stroke-box および view-box に対しては border-box に算出される。

mask-clip が、 コンマで区切られた他のマスクプロパティとどのように相互作用して各マスクレイヤーを形成するかについては、「複数のマスクレイヤー画像の重ね合わせ」の節を参照されたい。

7.6. 配置領域：mask-origin プロパティ

単一のボックスとしてレンダリングされる要素では、マスク配置領域を指定する。複数のボックスとしてレンダリングされる要素 （たとえば、複数行にまたがるインラインボックスや複数ページにまたがるボックス）では、box-decoration-break がどのボックスを対象としてマスク 配置領域を決定するかを指定する。

関連付けられた CSS レイアウトボックスを持たない SVG 要素では、値 content-box、padding-box および border-box は fill-box に算出される。

関連付けられた CSS レイアウトボックスを持つ要素では、値 fill-box、stroke-box および view-box は、 mask-origin の初期値に算出される。

注記：mask-origin プロパティは、 background-origin プロパティ [CSS3BG] に似ているが、値の集合と初期値が異なる。

注記：mask-clip が padding-box、mask-origin が border-box、mask-position が top left（初期 値）であり、要素にゼロでないボーダーがある場合、マスクレイヤー画像の上端と左端がクリップされる。

mask-origin が、 コンマで区切られた他のマスクプロパティとどのように相互作用して各マスクレイヤーを形成するかについては、「複数のマスクレイヤー画像の重ね合わせ」の節を参照されたい。

7.7. マスク画像のサイズ指定：mask-size プロパティ

マスク レイヤー画像のサイズを指定する。

プロパティ値の定義については、background-size プロパティ [CSS3BG]を参照されたい。

mask-size が、 コンマで区切られた他のマスクプロパティとどのように相互作用して各マスクレイヤーを形成するかについては、「複数のマスクレイヤー画像の重ね合わせ」の節を参照されたい。

7.8. マスクレイヤーの合成：mask-composite プロパティ

<compositing-operator> = add | subtract | intersect | exclude

各キーワードは、現在のマスクレイヤーとその下にあるマスクレイヤーとの合成に使用する 合成操作を定義する Porter-Duff 合成演算子 [COMPOSITING-1] を表す。

以下では、現在のマスクレイヤーをソース、その下にあるすべてのマスクレイヤー （対応する合成演算子が適用されたもの）をデスティネーションと呼ぶ。

それ以上マスクレイヤーがない場合、合成演算子を無視しなければならない。マスクレイヤーを 要素のコンテンツまたは要素の背後にあるコンテンツと合成してはならず、代わりに隔離されたグループ内へ レンダリングされるかのように動作しなければならない。

現在のマスクレイヤーに対する合成操作を適用する前に、現在のマスクレイヤーより下にある すべてのマスクレイヤーを合成しなければならない。

この例では、2 つのマスクレイヤー画像、circle.svg および rect.svg を使用する。

両方のマスクレイヤー 画像は、mask-image プロパティによる参照である：

mask-image: circle.svg, rect.svg;

rect.svg を持つマスクレイヤーは、circle.svg を持つマスクレイヤーより下にある。つまり、 circle.svg は rect.svg よりユーザーに近い。

mask-composite プロパティにより、作者は複数のマスクレイヤーを 組み合わせるさまざまな方法を選択できる。

• add は、circle.svg を rect.svg の上に描画する。この動作は、合成演算子 ソース オーバーによって説明される。

  mask-composite: add;
  

  

• subtract は、 rect.svg と重ならない circle.svg の部分を描画する。この動作は、 合成演算子 ソース アウトによって説明される。

  mask-composite: subtract;
  

  

• intersect は、 rect.svg と重なる circle.svg の部分を描画する。この動作は、 合成演算子 ソース インによって説明される。

  mask-composite: intersect;
  

  

• exclude は、 circle.svg と rect.svg の重ならない部分を描画する。この動作は、 合成演算子 XORによって説明される。

  mask-composite: exclude;
  

  

mask-image: rect.svg, circle.svg;
mask-composite: add, exclude;

これは、異なる合成演算子を使用する 3 つのマスクレイヤーの例である。

mask-image: trapeze.svg, circle.svg, rect.svg;
mask-composite: subtract, add;

まず、circle.svg が rect.svg に「追加」される。次の手順では、 trapeze.svg のうち、前の 2 つのレイヤーの合成結果と重ならない部分だけが 可視になる。

mask-composite が、 コンマで区切られた他のマスク プロパティとどのように相互作用して各マスクレイヤーを形成するかについては、「複数のマスクレイヤー画像の重ね合わせ」の節を参照されたい。

7.9. マスクの略式指定：mask プロパティ

<mask-layer> = <mask-reference> || <position> [ / <bg-size> ]? ||<repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator> || <masking-mode>

1 つの <geometry-box> 値と no-clip キーワードが存在する場合、<geometry-box> は mask-origin をその値に設定し、no-clip は mask-clip をその値に設定する。

1 つの <geometry-box> 値が存在し、no-clip キーワードが存在しない場合、<geometry-box> は mask-origin と mask-clip の両方をその値に設定する。

2 つの <geometry-box> 値が存在する場合、1 つ目は mask-origin を、2 つ目は mask-clip を設定する。

mask-repeat、mask-position、mask-clip、mask-origin および mask-size プロパティの使用 値は、<mask-reference> が mask 要素を参照する場合、効果を持ってはならない。この場合、 その要素がマスクレイヤー画像の位置、サイズ、およびクリッピングを定義する。

mask 略式プロパティは、mask-border もその初期値にリセットする。そのため、作者が カスケードの前段にあるすべてのマスク設定を上書きする場合、他の略式プロパティまたは個別のプロパティではなく、 mask 略式プロパティを使用することが推奨される。これにより、 新しいスタイルを有効にできるように、mask-border も確実にリセットされる。

7.10. マスク画像のレンダリングモデル

CSS ボックスモデルで整形された要素に、none 以外の値を持つ mask-image プロパティを適用すると、CSS の opacity [CSS3COLOR] と同様に、重ね合わせ コンテキストが確立され、要素のすべての子孫は、 グループ全体にマスキングが適用された 1 つのグループとして まとめてレンダリングされる。

mask-image プロパティは、どの要素の CSS ボックスの幾何形状またはヒットテストにも 影響しない。

mask プロパティは、SVG 要素のプレゼンテーション 属性である。

7.10.1. マスク処理

以下の節では、マスク 画像は、マスクレイヤー画像またはマスクボーダー画像のいずれかを指す。

マスク画像は、対象のアルファ値に乗算するマスク値の計算に関して、2 つの異なる方法の いずれかを使用して解釈できる。

マスク値を計算する第 1 の最も単純な方法は、マスク画像のアルファチャンネルを使用することである。この場合、 特定の点におけるマスク値は、単にその点のアルファチャンネルの値となる。カラーチャンネルは マスク値に寄与しない。

マスク値を計算する第 2 の方法は、マスク画像の輝度を使用することである。この場合、 特定の点におけるマスク値は、次の手順を使用してカラーチャンネル値およびアルファチャンネル値から 算出される。

1. カラーチャンネル値から輝度値を算出する。

   • mask 要素の color-interpolation の算出値が linearRGB である場合、 元の画像の色値（sRGB 色空間内にある可能性がある）を linearRGB 色 空間に変換する。

   • 次に、事前乗算されていない RGB 色値を使用して、輝度からアルファへの係数 （feColorMatrix フィルタープリミティブ [SVG11] で定義される）を適用し、RGB 色 値を輝度値に変換する。

2. 算出した輝度値に対応するアルファ値を乗算して、マスク値を生成する。

使用する方法にかかわらず、マスク値を計算する手順では、マスクの内容を 4 チャンネル RGBA グラフィックオブジェクトと仮定する。他の種類のグラフィックオブジェクトには、次のような 特別な処理が必要となる。

マスク内で使用される 3 チャンネル RGB グラフィックオブジェクト（たとえば、3 チャンネル画像 ファイルを参照する場合）は、アルファチャンネルを一様に 1 に設定した 4 チャンネル RGBA 画像に 変換されたかのように動作する。

マスク内で使用される単一チャンネル画像（たとえば、単一チャンネルのグレースケール画像 ファイルを参照する場合）は、参照先オブジェクトの単一チャンネルを使用して 3 つの カラーチャンネルを計算し、アルファチャンネルを一様に 1 に設定した 4 チャンネル RGBA 画像に 変換されたかのように動作する。

注記：グレースケール画像ファイルを参照する場合、符号化された グレースケール値と線形光値との関係を表す伝達曲線を、カラーチャンネルの計算時に 考慮しなければならない。

注記：SVG のグラフィックス 要素（たとえば、circle または text）はすべて、 マスキング操作では 4 チャンネル RGBA 画像として扱われる。

マスクの効果は、マスクが存在せず、代わりに指定されたオブジェクトのアルファ チャンネルにマスクから得られたマスク値を乗算した場合に生じる効果と同一である。

マスク画像で覆われていない領域は、 透明な黒色として扱われる。マスク値は 0 となる。

注記：マスク画像のタイルを繰り返すマスクでは、各タイルが互いにずれる場合がある。各 マスク画像間の空間は、透明な黒色のマスクとして扱われる。

7.10.2. 複数のマスク画像の重ね合わせ

ボックスのマスクは、複数のレイヤーを持つことができる。レイヤー数は、 mask-image プロパティのコンマで区切られた値の数によって決定される。他の <mask-reference> とともに値のリストに含まれる none の値も、レイヤーを作成する。

複数の背景画像の重ね合わせ [CSS3BG]を参照されたい。

mask-mode および mask-composite には、 CSS Backgrounds and Borders [CSS3BG] に対応するものがない。 対応するものを持つマスクプロパティと同様に、値のリストは先頭の 値から対応付けられ、末尾の余分な値は使用されない。プロパティにレイヤー数と対応するのに十分な コンマ区切りの値がない場合、UA は十分な数になるまで値のリストを繰り返して 使用値を計算しなければならない。

すべてのマスクレイヤー画像は、 （必要な場合はマスク処理を参照して）アルファマスクに変換され、mask-composite で指定された合成演算子を考慮した 合成によって結合される。

8. ボーダーボックスマスク

mask-border を使用すると、下図に示すように、画像を 4 つの隅、 4 つの辺、および中央部分の 9 つの部分に分割できる。

マスクボーダー画像の各部分。

これらの部分は、マスクボーダー 画像領域のサイズに合わせて、さまざまな方法で切り分け、拡大縮小、および引き伸ばすことができる。この変形された画像がマスクとして使用される。mask-border の構文は、CSS Background and Borders [CSS3BG] の border-image プロパティに対応する。

次の例のマスクボーダー画像は、寸法が 75 ピクセルの 4 つの 隅、4 つの辺、および引き伸ばされ拡大縮小される中央部分に分割される。

mask-border の例。左側のオブジェクトはマスク対象のオブジェクトである。 2 番目の画像はアルファマスクであり、最後の画像はマスクされたオブジェクトである。

div {
    background: linear-gradient(bottom, #F27BAA 0%, #FCC8AD 100%);
    mask-border-slice: 25 fill;
    mask-border-repeat: stretch;
    mask-border-source: url(mask.png);
}

8.1. マスクボーダー画像のソース：mask-border-source プロパティ

マスクボーダー画像として使用する画像を指定する。

空の画像（幅または高さがゼロ）である、ダウンロードに失敗した、存在しない、または 表示できない（たとえば、対応する画像形式でない）画像は無視される。その画像は引き続き マスクボーダー画像として扱われるが、 要素をマスクしない。

マスクボーダー画像の処理方法については、「マスク処理」を参照されたい。

none 以外の算出値により、CSS の 重ね合わせ コンテキスト [CSS21] が作成される。これは、CSS の opacity [CSS3COLOR] が 1 以外の値に対して行う場合と同様である。

mask-border-source と mask-image は互いに独立して指定できる。両方のプロパティが none 以外の値を持つ場合、要素は両方のマスキング操作によって順番にマスクされる。

注記：mask-image を mask-border-source の前後どちらで要素に適用しても違いはない。どちらの 操作順序でも同じレンダリング結果となる。

8.2. マスクボーダー画像の解釈：mask-border-mode プロパティ

mask-border-mode プロパティは、mask-border-source の <image> 値を 輝度マスクとアルファマスクのどちらとして扱うかを示す。（マスク処理を参照。）

各値には次の意味がある：

mask-mode および mask-type プロパティは、 マスクボーダー 画像の型に影響してはならない。

8.3. マスクボーダー画像の分割：mask-border-slice プロパティ

このプロパティは、マスクボーダー画像の上辺、右辺、下辺、および左辺から内側へのオフセットを指定し、 画像を 4 つの隅、4 つの辺、および中央の 9 つの領域に分割する。fill キーワードが存在しない限り、中央の画像部分は破棄され、 完全に不透明な白色として扱われる（中央部分に覆われたコンテンツはマスクされず、そのまま表示される）。

プロパティ値の定義については、border-image-slice プロパティ [CSS3BG]を参照されたい。

8.4. マスキング領域：mask-border-width プロパティ

マスクボーダー画像は、 マスクボーダー画像領域と呼ばれる領域内に描画される。既定では、この領域の境界は ボーダーボックスに対応する。mask-border-outsetを参照されたい。

プロパティ値の定義については、border-image-width プロパティ [CSS3BG]を参照されたい。

注記：関連付けられたレイアウトボックスを持たない SVG 要素では、border-width は 0 と見なされる。

8.5. 辺からの張り出し：mask-border-outset プロパティ

各値は、マスクボーダー画像領域をボーダーボックスよりどれだけ外側へ拡張するかを指定する。 4 つの値がある場合、それらは上、右、下、左の各辺の張り出しをこの順序で設定する。左の値が 省略された場合は右と同じになり、下の値が省略された場合は上と同じになり、右の値が 省略された場合は上と同じになる。

mask-border-width と同様に、<number> は、 対応する border-width の倍数を表す。どの mask-border-outset 値にも負の値は許可されない。

注記：関連付けられたレイアウトボックスを持たない SVG 要素では、border-width は 0 と見なされる。

8.6. マスクボーダー画像のタイル配置：mask-border-repeat プロパティ

このプロパティは、マスクボーダー画像の辺および中央部分の画像を、どのように拡大縮小してタイル配置するかを指定する。 1 つ目のキーワードは水平方向の辺に、2 つ目は垂直方向の辺に適用される。2 つ目のキーワードが 存在しない場合、1 つ目と同じであると見なされる。

プロパティ値の定義については、border-image-repeat プロパティ [CSS3BG]を参照されたい。

マスクボーダー画像の各部分を拡大縮小してタイル配置する正確な処理は、マスクボーダー画像によるマスキングの節に記載されている。

8.7. マスクボーダー画像の略式指定：mask-border プロパティ

これは、mask-border-source、mask-border-slice、mask-border-width、mask-border-outset、mask-border-repeat および mask-border-mode を設定するための略式プロパティである。省略された値は、それぞれの初期 値に設定される。

注記：mask 略式プロパティは、mask-border、mask-border-source、mask-border-slice、mask-border-width、mask-border-outset、mask-border-repeat および mask-border-mode の各プロパティをリセットする。

8.8. マスクボーダー画像によるマスキング

mask-border-source で指定されたマスクボーダー 画像が mask-border-slice の値によって分割された後、結果として得られた 9 つの画像は、 ボーダー画像の描画 [CSS3BG] の節で説明される 4 つの手順により、対応するマスクボーダー 画像領域内で拡大縮小、配置、およびタイル配置される。

CSS ボックスモデルで整形された要素に mask-border-source プロパティを適用すると、 CSS の opacity [CSS3COLOR] と同様に、重ね合わせ コンテキストが確立され、要素のすべての子孫は、 グループ全体にマスキングが適用された 1 つのグループとして まとめてレンダリングされる。

mask-border-source プロパティは、どの要素の CSS ボックスの幾何形状 またはヒットテストにも影響しない。

9. SVG マスクのソース

9.1. mask 要素

属性の定義：

maskUnits = "userSpaceOnUse | objectBoundingBox"

属性 x, y, width および height の座標系を定義する。

userSpaceOnUse

x, y, width および height は、mask 要素が参照された時点で有効な現在のユーザー座標系 [CSS3-TRANSFORMS]内の値を表す （すなわち、mask プロパティを介して mask 要素を参照する要素の ユーザー座標系）。

objectBoundingBox

x, y, width および height は、マスクが適用される要素のオブジェクト境界ボックスの割合またはパーセンテージを表す。 ユーザー座標は、CSS の px 単位と同等のサイズになる。

maskUnits 属性が指定されていない場合、 objectBoundingBox の値が指定されたかのように動作する。

アニメーション可能：はい。

maskContentUnits = "userSpaceOnUse | objectBoundingBox"

mask の内容に使用する座標系を定義する。

userSpaceOnUse

mask 要素の内容に使用するユーザー座標系は、mask 要素が参照された時点で有効な現在のユーザー座標 系である（すなわち、mask プロパティを介して mask 要素を参照する 要素のユーザー座標系）。

objectBoundingBox

座標系の原点は、クリッピングパスが適用される要素の境界ボックスの 左上隅にあり、この境界 ボックスと同じ幅および高さを持つ。ユーザー座標は、 CSS の px 単位と同等のサイズになる。

maskContentUnits 属性が指定されていない場合、 userSpaceOnUse の値が指定されたかのように動作する。

アニメーション可能：はい。

x = "<length-percentage>"

可能な最大のオフスクリーンバッファー用の矩形の一隅における x 軸座標。 この属性が指定されていない一方で、属性 y, width または height の少なくとも 1 つが指定されている場合、 -10% の値が指定されたかのように動作する。

アニメーション可能：はい。

y = "<length-percentage>"

可能な最大のオフスクリーンバッファー用の矩形の一隅における y 軸座標。 この属性が指定されていない一方で、属性 x, width または height の少なくとも 1 つが指定されている場合、 -10% の値が指定されたかのように動作する。

アニメーション可能：はい。

width = "<length-percentage>"

可能な最大のオフスクリーンバッファーの幅。負の値またはゼロの値は、 要素のレンダリングを無効にする。 この属性が指定されていない一方で、属性 x, y または height の少なくとも 1 つが指定されている場合、 120% の値が指定されたかのように動作する。

アニメーション可能：はい。

height = "<length-percentage>"

可能な最大のオフスクリーンバッファーの高さ。 負の値またはゼロの値は、要素のレンダリングを無効にする。 この属性が指定されていない一方で、属性 x, y または width の少なくとも 1 つが指定されている場合、 120% の値が指定されたかのように動作する。

アニメーション可能：はい。

属性 x, y, width または height の少なくとも 1 つが指定されている場合、 指定されたオブジェクトと、x, y, width および height で定義された矩形が、現在のクリッピングパスを確立する。マスクのレンダリングされた 内容は、この現在のクリッピングパスによってクリップされなければならない。

CSS プロパティは、その祖先から mask 要素へ継承される。プロパティは、mask 要素を参照する要素からは継承されない。

mask 要素は 直接レンダリングされることはなく、mask プロパティを使用して参照できるものとしてのみ使用される。opacity, filter および display プロパティは mask 要素には適用されない。そのため、display プロパティが none 以外の値に設定されている場合でも、mask 要素は直接レンダリングされない。また、display プロパティが mask 要素またはその祖先のいずれかで none に設定されている場合でも、 mask 要素は参照できる。

9.2. マスクソースの解釈：mask-type プロパティ

mask-type プロパティは、mask 要素の内容を、 マスク値の計算で説明されているように、輝度マスクまたはアルファマスクのどちらとして扱うかを定義する。

各値には次の意味がある：

luminance

マスクの輝度値を使用する必要があることを示す。

alpha

マスクのアルファ値を使用する必要があることを示す。

mask-type プロパティにより、mask 要素の作者は、 優先するマスキングモードを指定できる。ただし、作者は、マスク対象のコンテンツの mask-mode の値を match-source 以外に設定することで、この優先指定を上書きできる。

<svg>
  <mask style="mask-type: luminance;" id="mask">
    ...
  </mask>
</svg>

<p style="mask-image: url(#mask); mask-mode: auto;">
  これはマスクされたコンテンツである。
</p>

lt;svg>
 <mask style="mask-type: luminance;" id="mask2">
   ...
 </mask>
lt;/svg>

lt;p style="mask-image: url(#mask2); mask-mode: alpha;">
 これはマスクされたコンテンツである。
lt;/p>

mask-type プロパティは、SVG 要素のプレゼンテーション 属性である。

10. プライバシーおよびセキュリティに関する考慮事項

マスキング操作の実行時間が、ソースおよびデスティネーションのピクセルから独立していることが重要である。 マスキング操作は、ピクセル値にかかわらず常に同じ時間がかかるように 実装しなければならない。この規則に従わない場合、攻撃者が情報を推測し、 タイミング攻撃を仕掛ける可能性がある。

タイミング攻撃とは、操作の実行にかかる時間を調査することで、通常は保護されている コンテンツに関する情報を取得する手法である。たとえば、赤色のピクセルの描画に 緑色のピクセルより長い時間がかかる場合、要素のコンテンツに一度もアクセスすることなく、 レンダリングされる要素のおおよその画像を再構築できる可能性がある。

<mask-source>および <clip-source>には、 リソースの取得に関する特別な要件がある。

ユーザーエージェントは、mask-image、mask-border-source および clip-path プロパティのすべての <mask-source>、<clip-source> および <image> 値に対して、[FETCH] 仕様で定義される潜在的に CORS が有効な フェッチ方式を使用しなければならない。取得時に、ユーザーエージェントは「Anonymous」モードを使用し、リファラーソースを スタイルシートの URL に設定し、オリジンを包含文書の URL に設定しなければならない。その結果ネットワーク エラーが発生した場合、値 none が指定されたかのように動作する。

付録 A：非推奨の clip プロパティ

この仕様により、clip プロパティは非推奨となる。作者には、代わりに clip-path プロパティを使用することが推奨される。UA は clip プロパティをサポートしなければならない。

clip プロパティは、絶対配置された要素にのみ適用される。SVG では、新しい ビューポートを確立する要素、pattern 要素、および mask 要素に適用される。各値には次の 意味がある：

auto

要素はクリップしない。

rect() = rect( <top>, <right>, <bottom>, <left> )

<top> および <bottom> はボックスの 上側ボーダー辺からのオフセットを指定し、<right> および <left> は ボックスの左側ボーダー辺からの オフセットを指定する。作者は、オフセット値をコンマで区切るべきである。ユーザーエージェントは コンマによる区切りをサポートしなければならないが、コンマなしの区切りもサポートしてよい （ただし、両者の組み合わせは不可）。これは、この仕様の以前の改訂版がこの点について曖昧だったためである。

<top>, <right>, <bottom>, および <left> は、<length> 値または auto のいずれかを持つことができる。 負の長さも許可される。値 auto は、 クリッピング領域の指定された辺が 要素によって生成されたボーダーボックスの辺と同じになることを意味する（すなわち、auto は、<top> および <left> では 0 と同じであり、 <bottom> では、高さの使用 値に垂直方向のパディングと ボーダー幅の合計を加えた値と同じであり、<right> では、幅の使用値に 水平方向のパディングとボーダー幅の合計を加えた値と同じである。そのため、4 つの auto 値を指定すると、クリッピング領域は 要素のボーダーボックスと同じになる）。

座標をピクセル座標に丸める場合、<left> と <right> が同じ値である場合（または <top> と <bottom> が同じ 値である場合）に、可視のピクセルが残らないように注意する必要がある。逆に、これらの 値が auto の場合、要素のボーダーボックス内に非表示のピクセルが残らないようにする必要がある。

clip プロパティは、SVG 要素のプレゼンテーション 属性である。

例：次の 2 つの規則：

p#one { clip: rect(5px, 40px, 45px, 5px); }
p#two { clip: rect(5px, 55px, 45px, 5px); }

両方の p が 50 × 55 ピクセルであると仮定すると、次の図の破線で囲まれた それぞれの矩形クリッピング領域が作成される：

この図は、異なる寸法の矩形クリッピング領域を持つ 2 つのブロックボックスが 隣り合っている様子を示している。（詳細な説明を参照。）

付録 B：ストローク 境界ボックスの計算

ストローク境界ボックスを計算するアルゴリズムは、 element の種類に応じて次のとおりである：

use または image ではないグラフィックス要素

テキスト コンテンツ要素を持つ a 要素

1. box を、element のオブジェクト境界ボックスで初期化された矩形とする。

2. stroke-width の使用値が <= 0 である場合、または stroke の使用値が none である場合、 box を返す。

3. delta を、stroke-width の半分で初期化された膨張値とする。

4. element が rect、ellipse、circle、または image でない場合、次の条件のうち 該当する最初のものに従う：

   stroke-linejoin の使用値が miter である

   1. miter を stroke-miterlimit の使用値とする。

   2. miter が 2 の平方根より小さく、かつ stroke-linecap の使用 値が square である場合、 delta に 2 の平方根を乗算する。それ以外の場合は、 delta に miter を乗算する。

   stroke-linecap の使用値が square である

   1. delta に 2 の平方根を乗算する。

5. box を delta の値だけ膨張させる。

6. box を返す。

注記：stroke-opacity、stroke-dasharray および stroke-dashoffset の値は、 ストローク境界ボックスの計算に影響しない。

コンテナー要素

use

1. parent を、コンテナー要素である場合はそのコンテナー要素とし、それ以外の場合は use 要素のシャドウツリーのルートとする。

2. parent の各子 child について

   1. child を指定してストローク境界ボックスアルゴリズムを呼び出す。

   2. childBox を、呼び出したアルゴリズムから返されたボックス値とする。

   3. childBox を child の座標空間から parent の座標空間へ写像する。

3. box を、すべての childBox の和集合とする。

4. box を返す。

image

1. element のオブジェクト境界ボックスを返す。

注記：SVG 仕様の将来の版では、この 節を上書きする可能性がある。

付録 C：DOM インターフェイス

SVGClipPathElement インターフェイス

SVGClipPathElement インターフェイスは、clipPath 要素に対応する。

[Exposed=Window]
interface SVGClipPathElement : SVGElement {
  readonly attribute SVGAnimatedEnumeration clipPathUnits;
  readonly attribute SVGAnimatedTransformList transform;
};

SVGMaskElement インターフェイス

SVGMaskElement インターフェイスは、mask 要素に対応する。

[Exposed=Window]
interface SVGMaskElement : SVGElement {
  readonly attribute SVGAnimatedEnumeration maskUnits;
  readonly attribute SVGAnimatedEnumeration maskContentUnits;
  readonly attribute SVGAnimatedLength x;
  readonly attribute SVGAnimatedLength y;
  readonly attribute SVGAnimatedLength width;
  readonly attribute SVGAnimatedLength height;
};

前回の公開以降の変更点

2014 年 8 月 26 日付 勧告候補以降、次の変更が行われた。

• mask 略式指定内の <'mask-mode'> 値を、<'mask-position'> と <'mask-size'> の間以外の任意の場所に記述できるようにした。

• clipPath 要素および mask 要素から SVGUnitTypes の実装を削除した。

• すべてのグラフィックス要素に適用されるプロパティを use 要素にも適用するようにした。

• mask-position の初期値を 0% 0% に、 mask-repeat の初期値を repeat に変更した。

• mask-origin および mask-clip の可能な値から margin-box を削除した。

• mask-clip は、mask 要素を参照するマスクレイヤー画像には影響しないことを明確化した。

• mask 略式指定に 1 つの <geometry-box> と no-clip キーワードが現れる場合の動作を明確化した。

• mask 要素への参照であるマスクレイヤー画像の mask-mode の値が match-source である場合、この mask 要素の mask-type プロパティの値を取るようにした。

• 関連付けられた CSS レイアウトボックスを持つ SVG 要素と持たない SVG 要素について、ボックスの対応付けを Fill and Stroke 仕様の対応付けに一致するよう変更した。

• 編集上の変更。

2014 年 5 月 22 日付 作業草案以降、次の変更が行われた。

• mask-size の初期値を border-box から auto に変更した。

2014 年 2 月 13 日付 作業草案以降、次の変更が行われた。

• mask-box* プロパティおよび用語を mask-border* に改称した。

• 複数のマスクレイヤーのサポートを追加した。（background の複数の背景レイヤーと同様。）

• キーワード add, subtract, intersect および exclude を使用して 複数のマスクレイヤー 画像の合成を制御する mask-composite プロパティを追加した。

• キーワード fill を伴わない mask-border-slice が、コンテンツの中央部分を クリップしないようにした。初期値を 0 fill から 0 に変更した。

• clip-rule, mask-mode および mask-type の説明を改善した。

• fill および stroke キーワードを fill-box および stroke-box に改称した。

• ストローク境界ボックスの定義を追加した。

• マスク画像の区別、すなわちマスクレイヤー画像とマスクボーダー画像との区別を改善した。

2013 年 10 月 29 日付 最終草案以降、次の変更が行われた。

• 将来の仕様でクリッピングに対するヒットテストを制御できるようになるという注記を削除した。

• 文書内の節の順序を変更した。

• プロパティ mask-image, mask-repeat, mask-position, mask-clip, mask-origin および mask-size の使用値は、 プロパティ自体ではなく <mask-source> に対して無視しなければならないことを明確化した。

• mask-size, mask-position の「アニメーション可能」節を、 反復可能なリストのリストとして説明していたものから、単一のリストに変更した。

• mask-repeat および mask-position の算出値を項目の リストとして説明していた。これを単一の 値のみを持つように変更した。

• ED へのリンクを https://drafts.fxtf.org/masking/ から https://drafts.fxtf.org/css-masking-1/ に変更した。

2013 年 6 月 20 日付作業草案以降、次の重要な変更が行われた。

• mask が mask-box プロパティをリセットするようにした。

• mask-repeat, mask-position および mask-origin の初期値を、それぞれ no-repeat, center および border-box に変更した。

• マスク画像の複数レイヤーを、この仕様の将来のレベルへ延期した。

• ピクセル操作、およびマスキングとクリッピングのリソース取得に関するセキュリティモデルを追加した。

• 「child」および select() 関数を次のレベルへ延期した。

2012 年 11 月 15 日付作業草案以降、次の重要な変更が行われた。

• CSS Backgrounds and Borders モジュールの用語および定義との統合を改善した。

• mask 略式プロパティの構文を、 background 略式プロパティに適合するよう変更した。

• SVG リソース（mask, clipPath）と画像 リソースとの間で、実装がどのように異なり得るかを定義した。

• mask-image において輝度マスクとアルファ マスクを切り替えるための mask-mode プロパティを追加した。

• SVGMaskElement および SVGClipPathElement の IDL 定義を WebIDL に適応させた。

• さらに編集上の変更を行った。

変更の詳細な一覧については、ChangeLogを参照されたい。

謝辞

Elika J. Etemad、Cameron McCormack、Liam R. E. Quin、Björn Höhrmann、Alan Stearns、Jarek Foksa、 David Baron、Boris Zbarsky、Markus Stange、および Sara Soueidan に、入念なレビュー、コメント、および 修正について感謝する。グラフィック素材を提供した CJ Gammon に特に感謝する。