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

1. はじめに

このセクションは規範的ではありません。

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

1.1. クリッピング

閉じたベクトルパス、シェイプまたはポリゴンは、いわゆるクリッピングパスを定義します。このクリッピングパスは領域であり（アンチエイリアスがない場合）、この領域の「内側」にあるものはすべて表示され、「外側」は「クリップアウト」されてキャンバス上に表示されません。

クリッピングパス（中央）が、異なる色で塗り分けられたポリゴン（左）に適用されます。結果として「クリップアウト」された形状（右）となります。

clip-pathプロパティは、指定された基本図形をクリッピングパスとして利用したり、clipPath要素を参照して、graphics elementsをクリッピングパスとして使用することができます。

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 image areaのサイズに合わせてスライス、スケール、ストレッチなど様々な方法で調整できます。mask-borderプロパティはmask-border-sourceやその他の特性をまとめたショートハンドプロパティです。

mask プロパティは、すべてのmask-borderやmask-image関連プロパティのショートハンドです。

注: マスキングは多様なグラフィック効果を可能にし、「表示部分」の制御を強化しますが、クリッピングパスはパフォーマンスが高く、基本図形は補間が容易です。

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

この仕様は、当該プロパティが適用された要素の視覚的レンダリングに影響するCSSプロパティ群を定義します。これらの効果は、視覚フォーマットモデル（[CSS21]）に従って要素のサイズや位置が決定された後に適用されます。これらのプロパティの値によってはスタッキングコンテキストが生成されることがあります。さらに、本仕様は Clipping: the clip property（[CSS21]）のセクションを置き換えます。

合成モデルは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のウィンドウ境界を超える場合、コンテンツはネイティブなOS環境によってウィンドウにクリップされることがあります。

クリッピングパスは要素のレンダリングに影響しますが、要素の本来のジオメトリには影響しません。クリップされた要素（つまり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要素の場合、used valueとしてcontent-boxやpadding-boxはfill-box、border-boxやmargin-boxはstroke-boxとなります。

CSSレイアウトボックスを持つ要素の場合、used valueとして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要素には適用されません。そのため、clipPath要素は、displayプロパティがnone以外に設定されていても直接描画されず、clipPath要素はdisplayプロパティがclipPath要素またはその祖先でnoneに設定されていても参照可能です。

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プロパティによる生のジオメトリー定義（特にtextへの影響）を明確化すること。 <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要素の子要素に指定された場合、該当子要素は参照されたクリッピングパスでクリップされた後、その輪郭が他の子要素と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参照（例：url(commonmasks.svg#mask)）またはCSS画像への参照。

none

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

none以外の算出値は、CSSのスタッキングコンテキスト[CSS21]を、CSSのopacity[CSS3COLOR]が1以外の値で作る場合と同様に生成します。

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

“マスク処理”セクションでマスクレイヤー画像の処理方法を参照してください。

注: none値が<mask-reference>リスト中に含まれる場合、mask-compositeプロパティで指定された合成演算子によりマスキング操作に影響することがあります。

注: <mask-source>はマスクレイヤーとして扱われ、繰り返し可能な<mask-reference>リストで<image>やさらに<mask-source>リスト項目と組み合わせ可能です。

注: 要素はmask-border-sourceでもマスク可能です。mask-border-sourceとmask-imageの連携については該当プロパティを参照してください。

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値は、mask layer imageのアルファ値をマスク値として使用することを示します。マスク値の計算参照。

luminance

luminance値は、mask layer imageの輝度値をマスク値として使用することを示します。マスク値の計算参照。

match-source

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

mask-imageプロパティの<mask-reference>が<image>型の場合、mask layer 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プロパティ

mask layer imageがサイズ指定と位置指定された後、どのようにタイルされるかを指定します。

プロパティ値の定義については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 layer imageに対して、mask-clipプロパティはマスキング描画領域を決定し、マスクの影響を受ける範囲となります。要素の描画された内容はこの領域に制限されなければなりません。

mask-clipプロパティは、mask要素を参照するmask layer imageには影響しません。x、y、width、height、maskUnits属性がmask要素のマスキング描画領域を決定します。

値の意味は以下の通りです：

content-box

描画内容はcontent boxに制限（クリップ）されます。

padding-box

描画内容はpadding boxに制限（クリップ）されます。

border-box

描画内容はborder boxに制限（クリップ）されます。

fill-box

描画内容はオブジェクトバウンディングボックスに制限されます。

stroke-box

描画内容はストロークバウンディングボックスに制限されます。

view-box

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

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

• 参照ボックスはviewBox属性で確立される座標系の原点に配置されます。

• 参照ボックスの寸法はviewBox属性のwidthおよびheight値となります。

no-clip

描画内容は制限（クリップ）されません。

CSSレイアウトボックスを持たないSVG要素の場合、used valueとしてcontent-boxやpadding-boxはfill-box、border-boxやmargin-boxはstroke-boxとなります。

CSSレイアウトボックスを持つ要素の場合、used valueとして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 layer imageの上端・左端はクリップされます。

“複数マスクレイヤー画像のレイヤー化”セクションでmask-origin が他のカンマ区切りのマスクプロパティと連携して各マスクレイヤーを形成する方法を参照してください。

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

mask layer imageのサイズを指定します。

background-sizeプロパティ[CSS3BG]でプロパティ値の定義を参照してください。

“複数マスクレイヤー画像のレイヤー化”セクションでmask-sizeが他のカンマ区切りのマスクプロパティと連携して各マスクレイヤーを形成する方法を参照してください。

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

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

各キーワードはPorter-Duff合成演算子[COMPOSITING-1]を表しており、現在のマスクレイヤーと下層のマスクレイヤーとの合成操作を定義します。

以下では、現在のマスクレイヤーをsource、それより下の全てのマスクレイヤー（対応する合成演算子が適用されたもの）をdestinationと呼びます。

さらに下のマスクレイヤーがない場合、合成演算子は無視されます。マスクレイヤーは要素自身の内容や背後の内容と合成してはならず、あくまで独立したグループとして描画されるように動作します。

現在のマスクレイヤーより下の全てのマスクレイヤーは、現在のマスクレイヤーの合成操作を適用する前に合成されなければなりません。

この例では2つのmask layer image（circle.svgとrect.svg）を使用しています。

両方のmask layer imageはmask-imageプロパティで参照されます：

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

rect.svgのマスクレイヤーはcircle.svgの下層にあり、circle.svgはユーザーにより近い位置に配置されます。

mask-compositeプロパティを使うことで、作者は複数のマスクレイヤーの合成方法を選択できます。

• addはcircle.svgをrect.svgの上に描画します。挙動はsource over合成演算子により説明されます。

  mask-composite: add;
  

  

• subtractはcircle.svgがrect.svgと重ならない部分のみを描画します。挙動はsource out合成演算子により説明されます。

  mask-composite: subtract;
  

  

• intersectはcircle.svgがrect.svgと重なる部分のみを描画します。挙動はsource in合成演算子により説明されます。

  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>値が存在する場合、最初の値がmask-origin、2番目の値がmask-clipを設定します。

プロパティmask-repeat、mask-position、mask-clip、mask-origin、mask-sizeのused valueは、<mask-reference>がmask要素を参照している場合は効果がありません。この場合、要素がmask layer imageの位置・サイズ・クリッピングを定義します。

maskショートハンドはmask-borderも初期値にリセットします。そのため、著者はカスケードの前のマスク設定を上書きしたい場合は他のショートハンドや個別プロパティよりもmaskショートハンドの使用を推奨します。これによりmask-borderもリセットされ、新しいスタイルが正しく反映されます。

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

mask-imageプロパティがnone以外の値でCSSボックスモデルで整形された要素に適用されると、その要素はCSSのopacity[CSS3COLOR]と同様にスタッキングコンテキストを生成し、全ての子孫要素がグループとしてまとめて描画され、マスキングがグループ全体に適用されます。

mask-imageプロパティは、要素のCSSボックスのジオメトリやヒットテストには影響しません。

maskプロパティはSVG要素の表示属性です。

7.10.1. マスク処理

以下のセクションで、mask imageとはmask layer imageまたはmask border imageのいずれかを指します。

マスク画像は、マスク値（対象のアルファ値に乗算される値）を計算する方法として、2つの異なる手法のいずれかで解釈されます。

マスク値を計算する最初で最も単純な方法は、mask imageのアルファチャンネルを使用することです。この場合、ある点におけるマスク値は、その点のアルファチャンネルの値となります。色情報はマスク値に寄与しません。

マスク値を計算する2つ目の方法は、マスク画像の輝度を使用することです。この場合、ある点のマスク値は次の手順で色チャンネル値とアルファ値から計算されます。

1. 色チャンネル値から輝度値を計算します。

   • color-interpolationプロパティの算出値がmask要素でlinearRGBの場合、元画像の色情報（sRGB色空間の可能性あり）をlinearRGB色空間に変換します。

   • 次に、非プリマルチプライドRGB値を使って、feColorMatrixフィルタプリミティブ[SVG11]で定義される輝度→アルファ係数を適用し、RGB値から輝度値へ変換します。

2. 算出された輝度値に対応するアルファ値を乗算してマスク値とします。

どちらの方法でも、マスク値の計算手順はマスク内容が4チャンネルのRGBAグラフィックスオブジェクトであることを前提としています。その他の種類のグラフィックスオブジェクトの場合は、以下のように特別な処理が必要です。

マスクで使われる3チャンネルのRGBグラフィックスオブジェクト（例：3チャンネル画像ファイルを参照した場合）は、アルファ値がすべて1の4チャンネルRGBA画像に変換されたかのように扱います。

マスクで使われる1チャンネル画像（例：1チャンネルグレースケール画像ファイルを参照した場合）は、参照元オブジェクトの1チャンネルを使って3つのカラー値を計算し、アルファ値は一律1として4チャンネルRGBA画像に変換されたかのように扱います。

注: グレースケール画像ファイルを参照する場合、エンコードされたグレースケール値と線形光値の対応カーブ（トランスファーカーブ）を色チャンネル計算時に考慮する必要があります。

注: SVGのグラフィック要素（例：circleやtext）は、マスキング処理上すべて4チャンネルRGBA画像として扱われます。

マスクの効果は、マスクがなかった場合に対象オブジェクトのアルファチャンネルがマスクの算出マスク値で乗算されるのと同じです。

mask imageで覆われていない領域は透明な黒として扱われ、マスク値は0となります。

注: 繰り返しタイルされたmask image同士は互いにオフセットを持つ場合があります。mask image間の領域は透明な黒のマスクとして扱われます。

7.10.2. 複数マスク画像のレイヤー化

ボックスのマスクは複数レイヤーを持つことができます。レイヤー数はmask-imageプロパティのカンマ区切り値数で決まります。noneが他の<mask-reference>と併記された場合でもレイヤーは生成されます。

複数背景画像のレイヤー化[CSS3BG]も参照してください。

mask-modeやmask-compositeはCSS Backgrounds and Borders[CSS3BG]に対応するプロパティはありません。対応プロパティがある場合と同じく、値リストは先頭から順にレイヤーへ割り当てられ、末尾の余分な値は使われません。プロパティ値がレイヤー数に足りない場合、UAは値リストを繰り返しレイヤー数に合わせてused valueを計算します。

全てのmask layer imageは（必要ならマスク処理を参照）アルファマスクに変換され、mask-compositeで指定された合成演算子を考慮して合成されます。

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

mask-borderを使うと画像を9分割できます：4つの角、4つの辺、中央の1ピース（下図参照）。

mask border imageのピース。

これらのピースはさまざまな方法でスライス、スケール、ストレッチされ、mask border image areaのサイズに合わせて調整されます。この変形画像がマスクとして使用されます。mask-borderの構文はCSS Background and Bordersborder-imageプロパティに対応します[CSS3BG]。

下記例のmask border imageは4つの角（各75px）、4つの辺、中央ピースに分割され、中央はストレッチとスケールされます。

mask-borderの例。左がマスク対象、中央がアルファマスク、右がマスク後のオブジェクト。

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 プロパティ

mask border imageとして使う画像を指定します。

空画像（幅または高さがゼロ）、ダウンロードに失敗した画像、存在しない画像、表示できない画像（未対応画像形式など）は無視されます。こうした画像もmask border imageとして扱われますが、要素のマスキングには使われません。

“マスク処理”でmask border imageの処理方法を参照してください。

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プロパティは、<image>値（mask-border-source）を輝度マスクまたはアルファマスクとして扱うかを示します。（マスク処理参照）

値の意味は以下の通りです：

mask-modeやmask-typeプロパティはmask border imageの型には影響しません。

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

このプロパティは、mask border imageの上端・右端・下端・左端からの内側オフセットを指定し、画像を9つの領域（4つの角、4つの辺、中央）に分割します。中央部分の画像は破棄され、完全に不透明な白として扱われます（中央部分で覆われたコンテンツはマスクされず、そのまま表示される）ただし、fill キーワードが指定されている場合を除きます。

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

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

mask border imageは、mask border image areaと呼ばれる領域の内部に描画されます。この領域の境界はデフォルトではborder boxに一致します。詳細はmask-border-outset参照。

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

注: レイアウトボックスを持たないSVG要素では、border-widthは0とみなされます。

8.5. エッジのはみ出し：mask-border-outset プロパティ

値はmask border image areaがborder boxより外側にはみ出す量を指定します。4値指定の場合は順に上・右・下・左のはみ出し量を設定します。左が省略された場合は右と同じ、下が省略された場合は上と同じ、右が省略された場合も上と同じになります。

mask-border-widthと同様に、<number>は対応するborder-widthの倍数を表します。mask-border-outsetの値には負の値は許可されません。

注: レイアウトボックスを持たないSVG要素では、border-widthは0とみなされます。

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

このプロパティは、mask border imageのサイドや中央部分の画像のスケール・タイル方法を指定します。最初のキーワードは水平サイド、2番目は垂直サイドに適用されます。2番目のキーワードが省略された場合は1つ目と同じ値が使われます。

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

mask border imageパーツのスケール・タイル処理については「mask border imageによるマスキング」セクションを参照してください。

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 imageがmask-border-sourceで与えられ、mask-border-slice値で分割された後、得られた9つの画像は4つのステップでスケール・配置・タイル化され、対応するmask border image領域に配置されます。詳細は枠画像の描画セクション[CSS3BG]参照。

mask-border-sourceプロパティがCSSボックスモデルで整形された要素に適用されると、CSSのスタッキングコンテキストを生成し、全ての子孫要素がグループ化されて描画され、マスキングがグループ全体に適用されます。これはCSSのopacity[CSS3COLOR]と同様です。

mask-border-sourceプロパティは、要素のCSSボックスのジオメトリやヒットテストには影響しません。

9. SVGマスクソース

9.1. mask要素

属性定義:

maskUnits = "userSpaceOnUse | objectBoundingBox"

属性x、y、width、heightの座標系を定義します。

userSpaceOnUse

x、y、width、heightは、ユーザー座標系（[CSS3-TRANSFORMS]）の値として解釈されます。この座標系はmask要素が参照された時点のものです（つまりmaskプロパティでmask要素を参照する要素のユーザー座標系）。

objectBoundingBox

x、y、width、heightは、マスクが適用される要素のオブジェクトバウンディングボックスの割合またはパーセンテージとして解釈されます。ユーザー座標はCSSのpx単位と同じ大きさです。

属性maskUnitsが指定されていない場合、objectBoundingBoxが指定されたものとして扱われます。

アニメーション可能: yes.

maskContentUnits = "userSpaceOnUse | objectBoundingBox"

maskの内容の座標系を定義します。

userSpaceOnUse

mask要素の内容のユーザー座標系は、mask要素が参照された時点の現在のユーザー座標系（すなわち、maskプロパティでmask要素を参照する要素のユーザー座標系）となります。

objectBoundingBox

座標系の原点は、マスキングパスが適用される要素のバウンディングボックスの左上隅であり、同じ幅と高さを持ちます。ユーザー座標はCSSのpx単位と同じ大きさです。

maskContentUnits属性が指定されていない場合、userSpaceOnUseが指定されたものとして扱われます。

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

x = "<length-percentage>"

最大サイズのオフスクリーンバッファの矩形の一隅のx軸座標です。 この属性が指定されていないが、y、width、heightのいずれかが指定されている場合、値-10%が指定されたものとして扱われます。

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

y = "<length-percentage>"

最大サイズのオフスクリーンバッファの矩形の一隅のy軸座標です。 この属性が指定されていないが、x、width、heightのいずれかが指定されている場合、値-10%が指定されたものとして扱われます。

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

width = "<length-percentage>"

最大サイズのオフスクリーンバッファの幅です。負の値またはゼロの値は要素の描画を無効化します。 この属性が指定されていないが、x、y、heightのいずれかが指定されている場合、値120%が指定されたものとして扱われます。

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

height = "<length-percentage>"

最大サイズのオフスクリーンバッファの高さです。 負の値またはゼロの値は要素の描画を無効化します。 この属性が指定されていないが、x、y、widthのいずれかが指定されている場合、値120%が指定されたものとして扱われます。

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

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

CSSプロパティはmask要素の祖先から継承されますが、mask要素を参照する要素からは継承されません。

mask要素は直接描画されることはなく、maskプロパティで参照される用途のみです。opacity、filter、displayプロパティはmask要素には適用されません。そのため、mask要素はdisplayプロパティがnone以外であっても直接描画されず、mask要素自身や祖先のdisplayプロパティがnoneでも参照用途には利用可能です。

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;">
  This is the masked content.
</p>

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

lt;p style="mask-image: url(#mask2); mask-mode: alpha;">
 This is the masked content.
lt;/p>

mask-typeプロパティはSVG要素の表示属性です。

10. プライバシーとセキュリティの考慮事項

マスキング操作の処理時間は、ソースやデスティネーションのピクセルに依存しないことが重要です。マスキング操作は、どんなピクセル値であっても常に同じ時間がかかるように実装しなければなりません。このルールが守られない場合、攻撃者が情報を推測しタイミング攻撃を仕掛ける可能性があります。

タイミング攻撃とは、保護されたコンテンツの処理にかかる時間を観察することで情報を得る手法です。たとえば、赤いピクセルを描画する方が緑のピクセルより時間がかかる場合、描画される要素の内容に直接アクセスせずとも粗い画像を復元できる可能性があります。

<mask-source>や<clip-source>は、リソースのフェッチに特別な要件があります。

ユーザーエージェントは、CORS対応フェッチ（[FETCH]仕様で定義）を、<mask-source>、<clip-source>、および<image>値（mask-image、mask-border-source、clip-pathプロパティ）に対して使用しなければなりません。フェッチ時は「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>は左端ボーダーエッジからのオフセットを指定します。著者は値の区切りにカンマを使うべきです。UAはカンマ区切りをサポートしなければならないが、カンマ無し（ただし混在は不可）もサポートしてもよいです。これは以前の仕様が曖昧だったためです。

<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: ストロークバウンディングボックスの算出

stroke bounding boxを算出するアルゴリズムは、elementの型によって次のようになります：

a グラフィック要素でuseやimageを除くもの

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

1. boxをelementのオブジェクトバウンディングボックスで初期化する。

2. used valueのstroke-width <= 0 またはstrokeのused valueがnoneならboxを返す。

3. deltaをstroke-widthの半分で初期化する。

4. elementがrect、ellipse、circle、image以外の場合、次の条件のうち該当するもの1つだけ順に処理：

   stroke-linejoinのused valueがmiterの場合

   1. miterをstroke-miterlimitのused valueで初期化。

   2. miterが√2未満かつstroke-linecapのused valueがsquareの場合、deltaに√2を乗算。そうでなければdeltaにmiterを乗算。

   stroke-linecapのused valueがsquareの場合

   1. deltaに√2を乗算。

5. boxをdelta分膨張させる。

6. boxを返す。

注: stroke-opacity、stroke-dasharray、stroke-dashoffsetの値はストロークバウンディングボックスの算出に影響しません。

コンテナ要素

use

1. parentをコンテナ要素ならそれ、そうでなければuse要素のシャドウツリーのルートにする。

2. 各子childごとに：

   1. ストロークバウンディングボックス算出アルゴリズムをchildで呼び出す。

   2. 呼び出し結果のボックス値をchildBoxとする。

   3. childBoxをchildの座標空間からparentの座標空間へマッピングする。

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

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日 Candidate Recommendation以降の変更です。

• <'mask-mode'>値がmaskショートハンド内で<'mask-position'>と<'mask-size'>以外の場所でも指定可能に。

• clipPathとmask要素からSVGUnitTypesのImplementsを削除。

• 全グラフィック要素に適用されるプロパティをuse要素にも適用するように。

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

• mask-originとmask-clipからmargin-boxを削除。

• mask-clipはmask layer imageがmask要素を参照している場合は影響しないことを明確化。

• maskショートハンドで1つの<geometry-box> とno-clipキーワードが現れた場合の挙動を明確化。

• mask-modeがmask layer imageでmask要素参照かつ値がmatch-sourceの場合、mask要素のmask-typeプロパティの値を使うべきことを明記。

• SVG要素のCSSレイアウトボックス有無によるボックスのマッピングがFill and Stroke仕様と一致するよう変更。

• 編集上の変更。

以下は2014年5月22日 Working Draft以降の変更です。

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

以下は2014年2月13日 Working Draft以降の変更です。

• mask-box*プロパティおよび用語をmask-border*へ名称変更。

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

• 複数マスクレイヤー合成のためのmask-compositeプロパティ追加。キーワードはadd、subtract、intersect、exclude。

• mask-border-sliceでキーワードfillなしの場合は中央ピースのクリップをしないように変更。初期値も0 fillから0へ。

• clip-rule、mask-mode、mask-typeの説明強化。

• fillとstrokeキーワードをfill-boxおよびstroke-boxへ名称変更。

• stroke bounding boxの定義追加。

• マスク画像の定義についてmask layer imageとmask border imageの区別を明確化。

以下は2013年10月29日 Last Call Working Draft以降の主な変更です。

• 今後の仕様でクリッピングのヒットテスト制御が可能になる旨の注記を削除。

• ドキュメント内のセクション順序変更。

• used valueのプロパティmask-image、mask-repeat、mask-position、mask-clip、mask-origin、mask-sizeは<mask-source>に対して無視することを明確化。

• mask-size、mask-positionの「Animatable」セクションをリストのリストとして記述していたが、単一リストに変更。

• mask-repeatとmask-positionの算出値をリストではなく1値に変更。

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

以下は2013年6月20日 Working Draft以降の主な変更です。

• maskはmask-boxプロパティをリセット。

• mask-repeat、mask-position、mask-origin の初期値をno-repeat、center、border-boxに変更。

• マスク画像の複数レイヤーは将来の仕様レベルへ延期。

• ピクセル操作やマスキング・クリッピングリソースのフェッチ時のセキュリティモデル追加。

• 「child」やselect()関数を次レベルへ延期。

2012年11月15日作業草案（英語）以降の主な変更点は以下の通りです。

• CSS背景・境界モジュールの用語および定義との統合を改善。

• maskショートハンドプロパティの構文をbackgroundショートハンドプロパティと整合するよう変更。

• SVGリソース（mask、clipPath）と画像リソースでの実装の違いを定義。

• mask-modeプロパティを追加し、mask-image上で輝度マスクとアルファマスクの切り替えを可能にした。

• 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にはグラフィック素材で感謝します。