CSS Masking Module Level 1

要約

この仕様は、視覚的な要素の部位を［部分的／全部的］に隠すための 2 つの手段 — マスク法と切り抜き — を供する。 CSS Masking provides two means for partially or fully hiding portions of visual elements: masking and clipping.

マスク法は、別のグラフィックな要素や画像を［輝度マスク／アルファマスク］として利用する方法を述べる。概して，CSS や SVG を介して要素を描画することは、概念的には，［要素を、その子孫も含め，バッファの中へ描いてから，そのバッファを要素の親の中に組成する］かのように述べれる。［輝度マスク／アルファマスク］は、組成段階の前に，このバッファの透明度に波及する。 Masking describes how to use another graphical element or image as a luminance or alpha mask. Typically, rendering an element via CSS or SVG can conceptually be described as if the element, including its children, are drawn into a buffer and then that buffer is composited into the element’s parent. Luminance and alpha masks influence the transparency of this buffer before the compositing stage.
切り抜きは、視覚的な要素の可視になる領域を述べる。領域は、一定の［ SVG グラフィックス要素／基本図形］を利用することにより述べれる。この領域の外側にあるものは描画されなくなる。 Clipping describes the visible region of visual elements. The region can be described by using certain SVG graphics elements or basic shapes. Anything outside of this region is not rendered.

1. 序論

この節は規範的ではない。This section is non-normative.

この仕様は、 2 種のグラフィックな演算 — 切り抜きとマスク法 — を定義する。両者とも，あるオブジェクトの部位を［全部的／部分的］に隠す。 This specification defines two different graphical operations which both fully or partly hide portions of an object: clipping and masking.

1.1. 切り抜き

いわゆる切り抜きパス（ clipping path ）は、閉じた［ベクターパス／図形／多角形］で定義される。切り抜きパスは、それが成す領域の “内側にあるもの” すべては，透過できるようにする一方で，外側にあるものすべては “切り取られて” キャンバス上に現れなくする（anti-aliasing は別として）。 A closed vector path, shape or polygon defines a so called clipping path. This clipping path is a region (in the absence of anti-aliasing) where everything on the “inside” of this region is allowed to show through but everything on the outside is “clipped out” and does not appear on the canvas.

オブジェクト

切り抜きパス

切り抜かれたオブジェクト

切り抜きパス（ 2 個目の図）は、 gradient が施された図形（ 1 個目の図）に適用される。この結果、図形は “切り取られる” （ 3 個目の図）。 A clipping path (middle) is applied on a polygon shaded with different colors (left). This results in a “clipped out” shape (right).

clip-path プロパティは、利用する切り抜きパスを［基本図形により，またはそれを与えるグラフィックス要素を伴う clipPath 要素を参照して］指定できる。 The clip-path property can use specified basic shapes as clipping path or reference an clipPath element with graphics elements to be used as clipping path.

1.2. マスク法

グラフィックなオブジェクトにマスクを適用したときの効果は、オブジェクトがマスクを通して背景に塗られたかのようになる — その結果，オブジェクトの各部は、［完全／部分的］にマスクにより除かれる。 The effect of applying a mask to a graphical object is as if the graphical object will be painted onto the background through a mask, thus completely or partially masking out parts of the graphical object.

オブジェクト

輝度マスク

マスクされたオブジェクト

輝度マスク（ 2 個目の図）は、単色で埋められた図形（ 1 個目の図）に適用されている。この結果は、マスクされた図形（ 3 個目の図）になる。 A luminance mask (middle) is applied on a shape filled with a gradient (left). This results in a masked shape (right).

マスクは、［ mask-image ／ mask-border-source ］プロパティを利用して適用される。 Masks are applied using the mask-image or mask-border-source properties.

mask-image プロパティは： ↓

mask 要素を参照できる — その場合、 mask 要素の内容がマスクとしてサーブする。 The mask-image property may reference a mask element. The content of the mask element serves as the mask.
あるいは、マスクとして利用する画像を直に指すこともできる — 多くの単純な利用用に，明示的な mask 要素の必要なしに。このマスクは — CSS 背景画像と同じ様に — mask-position, mask-size, その他の特徴付けプロパティを利用して，サイズでき, 位置できる。 Alternatively, for many simple uses, the mask-image property may refer directly to images to be used as mask, forgoing the need for an explicit mask element. This mask can then be sized and positioned just like CSS background images using the mask-position, mask-size and other characterizing properties.

mask-border-source プロパティは、マスクを 9 片に分割する。各片は、マスクボーダー画像区画のサイズに収まるように，様々な仕方で［切分けられ, 拡縮され, 伸張され］得る。 mask-border プロパティは、各種 mask-border-* プロパティ用の略式プロパティとしてサーブする。 The mask-border-source property splits a mask into 9 pieces. The pieces may be sliced, scaled and stretched in various ways to fit the size of the mask border image area. The mask-border property serves as a shorthand property for mask-border-source and other characterizing properties.

mask プロパティは、［ mask-border, mask-image ］に提携するすべてのプロパティ用の，略式プロパティとしてサーブする。 The mask property serves as a shorthand property for all mask-border and mask-image affiliated properties.

注記：マスク法は、一般に，内容の “可視な部位” に対する制御をより多く供して，高度なグラフィックな効果用により多くの可能性を与えるが、切り抜きパスの方が処理能は高く，基本図形の方が容易に補間できる。 Note: While masking gives many possibilities for enhanced graphical effects and in general provides more control over the “visible portions” of the content, clipping paths can perform better and basic shapes are easier to interpolate.

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

この仕様は、一群の CSS プロパティを定義する。それらは、それらが適用される要素の視覚的な描画に影響する。これらの効果は、［ [CSS21] § 視覚整形モデルに則って，要素がサイズされ, 位置された後］に適用される。これらのプロパティがとる一部の値は、積層文脈を作成させる。加えて，この仕様は、 [CSS21] による § 切り抜き： clip プロパティを置換する。 This specification defines a set of CSS properties that affect the visual rendering of elements to which those properties are applied. These effects are applied after elements have been sized and positioned according to the Visual formatting model from [CSS21]. Some values of these properties result in the creation of a stacking context. Furthermore, this specification replaces the section Clipping: the clip property from [CSS21].

組成モデルは、 SVG 組成モデル [SVG11] に従う：

要素は、まず［フィルタ効果 [FILTER-EFFECTS], 切り抜き, マスク法, 不透明度］が無い下でスタイルされる。
要素とその子孫は、一時的なキャンバス上に描かれる。
最後に、最初の項に挙げた効果が，挙げられた順に要素に適用される。

The compositing model follows the SVG compositing model [SVG11]: First the element is styled under absence of filter effects, masking, clipping and opacity. Then the element and its descendants are drawn on a temporary canvas. In a last step the following effects are applied to the element in order: filter effects [FILTER-EFFECTS], clipping, masking and opacity.

この仕様は、 [COMPOSITING-1] に定義される Porter-Duff 組成演算子による，複数のマスク層の組成を許容する。 This specification allows compositing multiple mask layers with the Porter Duff compositing operators defined in CSS Compositing and Blending [COMPOSITING-1].

用語オブジェクト限界ボックスは、 [SVG11] における定義に従うとする。 The term object bounding box follows the definition in SVG 1.1 [SVG11].

【この訳では、 [SVG11] を参照していた一部の SVG 用語の参照先を [SVG2] に違えている。】

3. 値

<basic-shape> は [CSS-SHAPES] にて定義される。 This specification follows the CSS property definition conventions from [CSS21]. Basic shapes are defined in CSS Shapes Module Level 1 [CSS-SHAPES]. Value types not defined in these specifications are defined in CSS Values and Units Module Level 3 [CSS3VAL].In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept CSS-wide keywords such as inherit as their property value [CSS3VAL]. For readability it has not been repeated explicitly.

【この節の他の内容は CSS 日本語訳共通ページに移譲。】

4. 各種用語

この仕様における各種 CSS プロパティと値の定義は、 [CSS3BG] における定義に相似的である。冗長さを避けるため、この仕様は [CSS3BG] の記述と定義に依拠する。 [CSS3BG] における次の用語は、この仕様においては，次の意味を持つ： Definitions of CSS properties and values in this specification are analogous to definitions in CSS Backgrounds and Borders [CSS3BG]. To avoid redundancy, this specification relies on descriptions and definitions of CSS Backgrounds and Borders. The following terms in CSS Backgrounds and Borders have the following meaning in this specification:

【括弧内は対応するプロパティ（訳者補足）】
この仕様における用語	[CSS3BG] における用語
マスク層画像（ `mask-image` ）	背景画像（ `background-image` ）
マスク塗り区画（ `mask-clip` ）	背景塗り区画（ `background-clip` ）
マスクサイズ（ `mask-size` ）	背景サイズ（ `background-size` ）
マスク位置（ `mask-position` ）	背景位置（ `background-position` ）
マスク位置決め区画（ `mask-origin` ）	背景位置決め区画（ `background-origin` ）
マスクボーダー画像（ `mask-border-source` ）	ボーダー画像（ `border-image-source` ）
マスクボーダー画像区画（ `mask-border-width`, `mask-border-outset` ）	ボーダー画像区画（ `border-image-width`, `border-image-outset` ）

Term in CSS Masking ｜ Term in [CSS3BG] mask layer image ｜ background images mask painting area ｜ background painting area mask-size ｜ background-size mask-position ｜ background-position mask positioning area ｜ background positioning area mask border image ｜ border-image mask border image area ｜ border image area

4.1. キーワードによる基準ボックス

【この節は、他所の記述を集約するための，この訳による追加。】

この仕様が定義するいくつかのプロパティは［ <coord-box> ／ <geometry-box> ］型の値をとる：

そのようなキーワード値による効果は、その使用値†に応じて，以下に与えるキーワードによる基準ボックスに基づく：

注記†：これらの基準ボックスは、当の要素において常に定義されるとは限らない — 例えば， <shape-box> 値による基準ボックスは、 SVG の描画文脈においては定義されず，他の値は CSS レイアウト文脈においては定義されない。そのような場合、使用値として，他のキーワード値に対応付けられてから解釈されることになる — どの値に対応付けられるかは、個々のプロパティごとに定義される。

content-box

要素の内容ボックス。

padding-box

要素のパディングボックス。

border-box

要素のボーダーボックス。

margin-box

要素のマージンボックス。

fill-box

要素のオブジェクト限界ボックス。

stroke-box

要素のストローク限界ボックス。

view-box

要素に最も近い SVG 表示域が成すボックス — SVG 表示域を作成している要素用に viewBox 属性が指定されているならば：

ボックスの位置は、 viewBox 属性により確立される座標系の原点になる。
ボックスの寸法は、 viewBox 属性が与える横幅, 縦幅（ <width>, <height> ）値で与えられる。

【 viewBox が指定されていない場合にどうなるかは、述べられていない。】

5. 切り抜きパス

切り抜きパスは、塗りを適用できる領域を制約する — 制約された領域は、切り抜き領域と呼ばれる。概念的には、この領域の外側にある，絵図を成すどの部分も描かれない。これには、［切り抜きパスが適用される要素と，その子孫たち］を成すどの［内容, 背景, ボーダー, テキスト装飾, 外形線, 可視なスクロール用の仕組み］も含まれる。 The clipping path restricts the region to which paint can be applied, the so-called clipping region. Conceptually, any parts of the drawing that lie outside of this region are not drawn. This includes any content, background, borders, text decoration, outline and visible scrolling mechanism of the element to which the clipping path is applied, and those of its descendants.

要素の先祖も、要素の内容のある部位を切り抜くこともある（例えば、自前の［ clip ／ clip-path ］プロパティを介して, および自身の overflow プロパティは visible かどうかにより）。描画されるものは、それらが成す累積的な交差域に制約される。 An element’s ancestors may also clip portions of their content (e.g., via their own clip or clip-path properties and/or if their overflow property is not visible). What is rendered is the cumulative intersection.

切り抜き領域が UA の文書ウィンドウが成す限界域を超過する場合、内容は，OS 環境により，そのウィンドウに切り抜かれ得る。 If the clipping region exceeds the bounds of the UA’s document window, content may be clipped to that window by the native operating environment.

切り抜きパスは、要素の描画に影響する。それは、要素の内来的な幾何には影響しない。切り抜かれた要素（すなわち， clip-path プロパティを介して clipPath 要素を参照する要素やその子）の幾何は、切り抜かれなかったかのように同じであり続けるものとする。 A clipping path affects the rendering of an element. It does not affect the element’s inherent geometry. The geometry of a clipped element (i.e. an element which references a clipPath element via a clip-path property, or a child of the referencing element) must remain the same as if it were not clipped.

ある図形（ path ）を考える — 図形は、先祖に適用された切り抜きパスにより切り抜かれていて： Consider a shape that is clipped by a clipping path applied to an ancestor:

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

図形は、 use 要素により参照されているとする： The shape is referenced by a use element:

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

この図形が成す幾何に，真円な（ circle() ）切り抜きパスが波及することはない。 The geometry of the shape is not influenced by the circular clipping path.

既定では、図形の切り取られた（可視でない）領域に対しては， pointer-events 【プロパティにより可能なイベント】を配送しないものとする。例えば，要素がある図形で切り抜かれている場合、切り抜き領域を成す図形の外側では click イベントを受け取らないことになる。 By default, pointer-events must not be dispatched on the clipped-out (non-visible) regions of a shape. For example, an element with a dimension of 10px to 10px which is clipped to a circle with a radius of 5px will not receive click events outside the clipping region.

5.1. 切り抜き図形： `clip-path` プロパティ

名前	`clip-path`
値	`<clip-source>` \| [ `<basic-shape>` \|\| `<geometry-box>` ] \| `none`
初期値	`none`
適用対象	すべての要素。 SVG においては、［ `defs` 要素以外のコンテナ要素／グラフィックス要素／ `use` 要素］。 All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
継承	されない
百分率	受容しない
算出値	`<url>` は絶対化される／他は指定されたとおり as specified, but with <url> values made absolute
正準的順序	文法に従う
アニメーション型	算出値の型による【 `<basic-shape>` については、基本図形の補間も見よ。】

基本図形を指定するか, または clipPath 要素を参照して，切り抜きパスを作成する。 Specifies a basic shape or references a clipPath element to create a clipping path.

<clip-source>
	= <url>

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

<clip-source>

切り抜きパスを clipPath 要素への URL 参照として与える。

<basic-shape>

切り抜きパスを [CSS-SHAPES] に定義される基本図形関数として与える。基本図形をサイズして位置するために用立てる基準ボックスは、 <geometry-box> が指定されて［いればそのキーワードによる基準ボックス／いなければ border-box 【に対する使用値の】キーワードによる基準ボックス］になる。 A basic shape function as defined in the CSS Shapes module [CSS-SHAPES]. A basic shape makes use of the specified reference box to size and position the basic shape. If no reference box is specified, the border-box will be used as reference box.

<geometry-box>

指定されたキーワードによる基準ボックスは：

<basic-shape> と併せて指定された場合には、 <basic-shape> 用の基準ボックスを供する。
単独で指定された場合には、そのボックスを成す辺が切り抜きパスとして利用される — 隅の形状付け（例： border-radius [CSS3BG] により定義されるものなど）があれば，それらも含めて。ボックス値による図形 [CSS-SHAPES] も見よ。

If specified in combination with a <basic-shape> it provides the reference box for the <basic-shape>.If specified by itself, uses the edges of the specified box, including any corner shaping (e.g. defined by border-radius [CSS3BG]), as clipping path. See also “Shapes from box values” [CSS-SHAPES].fill-box • Uses the object bounding box as reference box.stroke-box • Uses the stroke bounding box as reference box.view-box • Uses the nearest SVG viewport as reference box.If a viewBox attribute is specified for the SVG viewport creating element: • The reference box is positioned at the origin of the coordinate system established by the viewBox attribute. • The dimension of the reference box is set to the width and height values of the viewBox attribute.

none

切り抜きパスは作成されない。 No clipping path gets created.

<geometry-box> 値に対する使用値は： ↓

CSS レイアウトボックスが結び付けられていない SVG 要素においては：［ content-box ／ padding-box ］に対しては fill-box になり、［ border-box ／ margin-box ］に対しては stroke-box になる。 For SVG elements without associated CSS layout box, the used value for content-box and padding-box is fill-box and for border-box and margin-box is stroke-box.
CSS レイアウトボックスが結び付けられた要素においては：fill-box に対しては content-box になり，［ stroke-box ／ view-box ］対しては border-box になる。 For elements with associated CSS layout box, the used value for fill-box is content-box and for stroke-box and view-box is border-box.

算出値が none 以外になる場合 — opacity の値が 1 未満のときと同じ仕方で — 積層文脈を作成させる。 A computed value of other than none results in the creation of a stacking context [CSS21] the same way that CSS opacity [CSS3COLOR] does for values other than 1.

URL 参照が妥当でない場合（例：存在しないオブジェクトを指している／オブジェクトは clipPath 要素でない）, 適用され切り抜きは無い。 If the URI reference is not valid (e.g it points to an object that doesn’t exist or the object is not a clipPath element), no clipping is applied.

この例は、基本図形 polygon() の切り抜きパスとしての利用をデモる。各［スペースで分離された長さペア］は、多角形のある頂点を表現する。 § 序論にて可視化された切り抜きパスを見れる。 This example demonstrates the use of the basic shape <polygon()> as clipping path. Each space separated length pair represents one point of the polygon. The visualized clipping path can be seen in the introduction.

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 プロパティはある SVG clipPath 要素を参照する。各［カンマで分離された長さペア］は、多角形のある頂点を表現する。前の例のときと同じく，序論にて可視化された切り抜きパスを見れる。 In this example, the clip-path property references an SVG clipPath element. Each comma separated length pair represents one point of the polygon. As for the previous example, the visualized clipping path can be seen in the introduction.

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 要素用の呈示属性である。 The clip-path property is a presentation attribute for SVG elements.

6. SVG による切り抜きパスソース

6.1. `clipPath` 要素

名前	`clipPath`
分類	コンテナ要素／決して描画されない要素 container elements, never-rendered element
内容モデル	任意個数, 任意順序の，次に挙げる要素：記述的要素, アニメーション要素, 図形要素, `text`, `use`, `script`
属性	条件付き処理属性, 中核属性, 呈示属性, `class`, `style`, `externalResourcesRequired`, `transform`, `clipPathUnits`
DOM インタフェース	`SVGClipPathElement`

属性定義：

clipPathUnits = "userSpaceOnUse | objectBoundingBox"

clipPath 要素の内容用の利用元座標系を定義する。 clip-path プロパティを介してこの要素を参照している要素（すなわち，この要素が定義する切り抜きパスが適用される要素）を E で表すとき、この座標系は，指定された値に応じて次で与えられる： Defines the coordinate system for the contents of the clipPath.

userSpaceOnUse: E 用の利用元座標系に一致するように確立される。 The contents of the clipPath represent values in the current user coordinate system in place at the time when the clipPath element is referenced (i.e., the user coordinate system for the element referencing the clipPath element via the clip-path property).
objectBoundingBox: 座標［ (0, 0) ／ (1, 1) ］が E の限界ボックスの［左上隅／右下隅］に写像されるように確立される。その利用元単位と CSS px 単位は等価になる。 The coordinate system has its origin at the top left corner of the bounding box of the element to which the clipping path applies to and the same width and height of this bounding box. User coordinates are sized equivalently to the CSS px unit.

clipPathUnits 属性が指定されていない場合の効果は、値 userSpaceOnUse が指定されていたかのようになる。 If attribute clipPathUnits is not specified, then the effect is as if a value of userSpaceOnUse were specified.

アニメート可能。 Animatable: yes.

clipPath 要素は、先祖から CSS プロパティを継承するが，それを参照している要素からは継承しない。 CSS properties inherit into the clipPath element from its ancestors; properties do not inherit from the element referencing the clipPath element.

clipPath 要素は、直に描画されることは決してない。その用途は、 clip-path プロパティを利用して参照する他にない。 display プロパティは clipPath 要素には適用されないので、［ clipPath 要素, およびその先祖］の display プロパティの値が何であれ、 clipPath 要素は，直に描画されることはなく, また参照用に可用になる。 clipPath elements are never rendered directly; their only usage is as something that can be referenced using the clip-path property. The display property does not apply to the clipPath element; thus, clipPath elements are not directly rendered even if the display property is set to a value other than none, and clipPath elements are available for referencing even when the display property on the clipPath element or any of its ancestors is set to none.

clipPath 要素は［ path ／ text ／基本図形（ circle など）／ use ］要素を包含し得る。 use 要素は、 clipPath 要素の子であるならば［ path 要素／ text 要素／基本図形］要素を直に参照していなければならない。間接的な参照は、エラーであり，当の clipPath 要素を無視するものとする。 A clipPath element can contain path elements, text elements, basic shapes (such as circle) or a use element. If a use element is a child of a clipPath element, it must directly reference path, text or basic shapes elements. Indirect references are an error and the clipPath element must be ignored.

Firefox は、内容モデルに違反している clipPath を参照している要素の描画を不能化する。どのブラウザも，間接的な参照を伴う clipPath の利用を無視していない。（課題 #17） Firefox disables rendering of elements referencing clipPaths with violated content model. No browser ignores clipPath on use with indirect reference. [Issue #17]

clipPath 要素の中では、各子要素†が成す生の幾何††が、要素が表現する切り抜きパスを定義し，概念的な 1-bit マスクを定義する†††。それは、 clipPath 要素に結び付けられたグラフィックたちが成す “影絵” を表現する。オブジェクトの［それらの幾何の外側にある部分］は、すべてマスクされて除かれる。子要素たちが成す影絵を合併して（ “bit-OR” ）得られる単独の影絵が，塗りを適用できる領域を制約するために利用される。したがって，所与の地点は、 clipPath のいずれかの子の内側にあるならば、切り抜きパスの内側にある。

† 子要素のうち，［ display ／ visibility ］により不可視にされているものは、切り抜きパスには寄与しない。
†† 生の幾何とは、［ fill, stroke, stroke-width ］などの描画プロパティは除外したそれを表す。【すなわち、子要素が表現する図形を定義するパス】
††† その幾何を成す辺に沿う anti-aliasing は別として。【 1-bit マスクとは、外側のマスク値は 0, 内側のマスク値は 1 にされたマスクに等価になることを意味する。】

The raw geometry of each child element exclusive of rendering properties such as fill, stroke, stroke-width within a clipPath conceptually defines a 1-bit mask (with the possible exception of anti-aliasing along the edge of the geometry) which represents the silhouette of the graphics associated with that element. Anything outside the outline of the object is masked out. If a child element is made invisible by display or visibility it does not contribute to the clipping path. When the clipPath element contains multiple child elements, the silhouettes of the child elements are logically OR’d together to create a single silhouette which is then used to restrict the region onto which paint can be applied. Thus, a point is inside the clipping path if it is inside any of the children of the clipPath.

生の幾何に影響する CSS プロパティについて定義する。とりわけテキスト上の。（課題 #170） Define raw geometry with regards to CSS properties that affect it. Especially on text. [Issue #170]

所与のグラフィックス要素用に実際に利用される切り抜きパスは、［要素の clip-path プロパティに指定された切り抜きパス］と［新たな表示域を確立している［要素の先祖］たちの clip-path プロパティに指定された切り抜きパス］との交差域になる（ [SVG11] を見よ）。 For a given graphics element, the actual clipping path used will be the intersection of the clipping path specified by its clip-path property (if any) with any clipping paths on its ancestors, as specified by the clip-path property on the elements which establish a new viewport. (See [SVG11])

加えて： A couple of additions:

clipPath 要素の先祖の切り抜きパスが， clipPath 要素やその子要素に継承されることはない。 The clipPath element itself and its child elements do not inherit clipping paths from the ancestors of the clipPath element.
clipPath 要素やその子要素には clip-path プロパティを指定できる：
- 妥当な clip-path 参照が clipPath 要素に設置された場合、結果の切り抜きパスは，［ clipPath 要素の内容が成す切り抜きパスと参照先のそれとの交差域になる。
- 妥当な clip-path 参照が clipPath 要素の子に設置された場合、その子要素は，他の影絵と合併される前に，参照先の切り抜きパスで切り抜かれる。
The clipPath element or any of its children can specify property clip-path. If a valid clip-path reference is placed on a clipPath element, the resulting clipping path is the intersection of the contents of the clipPath element with the referenced clipping path. If a valid clip-path reference is placed on one of the children of a clipPath element, then the given child element is clipped by the referenced clipping path before OR’ing the silhouette of the child element with the silhouettes of the other child elements.
切り抜きパスが空な場合【内容が空な clipPath 要素など】、 clip-path プロパティが適用される要素は完全に切り抜かれて消えることになる。 An empty clipping path will completely clip away the element that had the clip-path property applied.

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

名前	`clip-rule`
値	`nonzero` \| `evenodd`
初期値	`nonzero`
適用対象	SVG グラフィックス要素 Applies to SVG graphics elements
継承	される
百分率	受容しない
算出値	指定されたとおり
正準的順序	文法に従う
アニメーション型	離散的

clip-rule プロパティは、［所与の地点が［グラフィックス要素で作成される切り抜き領域用の図形］の内側にあるかどうかを決定する］ときに利用されることになるアルゴリズムを指示する。アルゴリズムと各種 clip-rule 値の定義は、 fill-rule プロパティの定義に従う。 [SVG2] § 各種フィルプロパティを見よ。 The clip-rule property indicates the algorithm which is to be used to determine whether a given point is inside a shape for a clipping region created with a graphics element. The definition of the algorithms and the clip-rule values follows the definition of the fill-rule property. See section “Fill Properties” in SVG 1.1 [SVG11].

nonzero: fill-rule プロパティの記述を見よ。 See description of fill-rule property [SVG11].
evenodd: fill-rule プロパティの記述を見よ。 See description of fill-rule property [SVG11].

clip-rule プロパティは、 clipPath 要素の中に包含されているグラフィックス要素のみに適用される。 The clip-rule property only applies to graphics elements that are contained within a clipPath element.

注記： clip-rule プロパティは <basic-shape> には適用されない。 Note: The clip-rule property does not apply to <basic-shape>s.

nonzero 規則を示す絵図： The following drawing illustrates the nonzero rule:

Shape with nonzero rule. — 3 個の図形がある：自身に交差する一筆の線で描かれた，5 個の頂点からなる星形（図左）／同じ図形の下位パスに属する, 時計回りに描かれた大小 2 個の真円（図中）／同じ図形の下位パスに属する, 時計回りに描かれた大きい真円と反時計回りに描かれた小さい真円（図右）。最後の図形にのみ “穴” がある。 Three shapes from left to right: Star with 5 points drawn in one continuous, overlapping line; 2 clockwise drawn circles, one contains the other and both are subpaths of the same shape; 2 circles, one containing the other with the bigger one drawn in a clockwise direction and the smaller one in a counter-clockwise direction and both belonging to the same shape. Only the last shape has a "hole".

evenodd 規則を示す絵図: The following drawing illustrates the evenodd rule:

Shape with even-odd rule. — 3 個の図形は前の例と同じだが、どの図形にも “穴” がある。 Three shapes from left to right: Star with 5 points drawn in one continuous, overlapping line; 2 clockwise drawn circles, one contains the other and both are subpaths of the same shape; 2 circles, one containing the other with the bigger one drawn in a clockwise direction and the smaller one in a counter-clockwise direction and both belonging to the same shape. All 3 shapes have a "hole".

次のコード片は、切り抜きパスに even-odd 切り抜き規則を適用することになる — 切り抜き図形を定義する path 要素には clip-rule が指定されているので： The following fragment of code will cause an even-odd clipping rule to be applied to the clipping path because clip-rule is specified on the path element that defines the clipping shape:

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

一方で，次のコード片では、 even-odd 切り抜き規則は適用されないことになる — clip-rule は、切り抜き図形を定義しているオブジェクトではなく，それを参照している要素上に指定されているので： whereas the following fragment of code will not cause an evenodd clipping rule to be applied because the clip-rule is specified on the referencing element, not on the object defining the clipping shape:

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

clip-rule プロパティは、 SVG 要素用の呈示属性である。 The clip-rule property is a presentation attribute for SVG elements.

7. マスク

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

名前	`mask-image`
値	`<mask-reference>`#
初期値	`none`
適用対象	すべての要素。 SVG においては、［ `defs` 要素以外のコンテナ要素／グラフィックス要素／ `use` 要素］。 All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
継承	されない
百分率	受容しない
算出値	キーワード `none` ／ `<image>` の算出値／ `<url>` の算出値 the keyword none, a computed <image>, or a computed <url>
正準的順序	文法に従う
アニメーション型	離散的

このプロパティは、要素のマスク層画像を設定する。 This property sets the mask layer image of an element. Where:

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

<url>: ［ mask 要素／CSS 画像］†への URL 参照（例えば url(commonmasks.svg#mask) ）。【†どちらになるかは、多義的な画像 URL を見よ。】 A URL reference to a mask element (for example url(commonmasks.svg#mask)) or to a CSS image.
none: 透明な黒の画像層として数えられるようになる。 A value of none counts as a transparent black image layer.

次に該当するマスク参照であっても、透明な黒の画像層として数えられる：空画像である（横幅または縦幅が 0 ）／ダウンロードに失敗した／ mask 要素への参照でない／存在しない／表示できない（例：サポートされる画像形式でない） A mask reference that is an empty image (zero width or zero height), that fails to download, is not a reference to an mask element, is non-existent, or that cannot be displayed (e.g. because it is not in a supported image format) still counts as an image layer of transparent black.

マスク層画像を処理する方法については、マスクの処理法を見よ。 See the section “Mask processing” for how to process a mask layer image.

注記： <mask-reference> が成すリスト内の値 none は、 mask-composite に指定される利用される組成演算子に依存して，マスク法演算に波及し得る。 Note: A value of none in a list of <mask-reference>s may influence the masking operation depending on the used compositing operator specified by mask-composite.

注記： <mask-source> は、マスク層として数えられ、繰り返し可能な <mask-reference> リスト内で <image> や更なる <mask-source> リストアイテムと組み合せれる。 Note: A <mask-source> counts as mask layer and can be combined in a repeatable <mask-reference> list with <image> or further <mask-source> list items.

注記：要素は、 mask-border-source でもマスクできる。そのプロパティと mask-image との相互作用については、 mask-border-source を見よ。 Note: An element can also be masked with mask-border-source. See mask-border-source for the interaction of that property with mask-image.

マスク参照の例： Examples for mask references:

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

mask-image 値を成すカンマで分離された値たちが，どのマスク層に寄与するかについては、複数のマスク画像の多層化法を見よ。 See the section “Layering multiple mask layer images” for how mask-image interacts with other comma-separated mask properties to form each mask layer.

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

名前	`mask-mode`
値	`<masking-mode>`#
初期値	`match-source`
適用対象	`mask-image` と同じ All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
継承	されない
百分率	受容しない
算出値	指定されたとおり
正準的順序	文法に従う
アニメーション型	離散的

mask-mode プロパティは、 <mask-reference> を［輝度マスク, アルファマスク］のどちらに扱うかを指示する（マスクの処理法を見よ）。 The mask-mode property indicates whether the <mask-reference> is treated as luminance mask or alpha mask. (See Mask processing.)

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

各種値の意味は： Values have the following meanings:

alpha

マスク層画像のアルファ値がマスク値として利用されるべきであることを指示する。マスク値の計算法を見よ。 A value of alpha indicates that the alpha values of the mask layer image should be used as the mask values. See Calculating mask values.

luminance

マスク層画像の輝度値がマスク値として利用されるべきであることを指示する。マスク値の計算法を見よ。 A value of luminance indicates that the luminance values of the mask layer image should be used as the mask values. See Calculating mask values.

match-source

mask-image プロパティの <mask-reference> に応じて：

<mask-source> 型である場合、参照先の mask 要素の mask-type プロパティに指定された値を利用するものとする。
<image> 型である場合、マスク層画像のアルファ値がマスク値として利用されるべきである。

If the <mask-reference> of the mask-image property is of type <mask-source> the value specified by the referenced mask element’s mask-type property must be used.If the <mask-reference> of the mask-image property is of type <image> the alpha values of the mask layer image should be used as the mask values.

次の例では、 mask-type プロパティは， mask 要素用のマスク型値を alpha に設定する。 mask-image プロパティは，この mask 要素を参照していて、 mask-mode プロパティの値は luminance にされている。 mask-mode プロパティは、 mask-type を luminance にしている定義を上書きすることになる。 In the following example, the mask-type property sets the mask type value for the mask element to alpha. The mask-image property has a reference to this mask element and the mask-mode property has a value of luminance. The mask-mode property will override the definition of mask-type to luminance.

mask-mode プロパティは、 mask-border-source のマスク法モードには影響しないものとする。 The mask-mode property must not affect the masking mode of mask-border-source.

<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 値を成すカンマで分離された値たちが，どのマスク層に寄与するかについては、複数のマスク画像の多層化法を見よ。 See the section “Layering multiple mask layer images” for how mask-mode interacts with other comma-separated mask properties to form each mask layer.

7.3. マスク画像の敷き詰め法： `mask-repeat` プロパティ

名前	`mask-repeat`
値	`<repeat-style>`#
初期値	`repeat`
適用対象	`mask-image` と同じ All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
継承	されない
百分率	受容しない
算出値	`background-repeat` と同じ Consists of: two keywords, one per dimension
正準的順序	文法に従う
アニメーション型	離散的

各マスク層画像がサイズされ, 位置された後に敷き詰められる方法を指定する。 Specifies how mask layer images are tiled after they have been sized and positioned.

値の定義については、 background-repeat プロパティを見よ。 [CSS3BG] See background-repeat property [CSS3BG] for the definitions of the property values.

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

Image of an element with a dotted mask. — `space` による効果：ドットを成すマスク層画像は、等間隔に置かれつつ，マスク塗り区画全体を覆うように敷き詰められる。 The effect of space: the mask layer image of a dot is tiled to cover the whole mask painting area and the mask layer images are equally spaced.

mask-repeat 値を成すカンマで分離された値たちが，どのマスク層に寄与するかについては、複数のマスク画像の多層化法を見よ。 See the section “Layering multiple mask layer images” for how mask-repeat interacts with other comma-separated mask properties to form each mask layer.

7.4. マスク画像の位置決め： `mask-position` プロパティ

名前	`mask-position`
値	`<position>`#
初期値	`0% 0%`
適用対象	`mask-image` と同じ All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
継承	されない
百分率	［マスク塗り区画のサイズ − マスク層画像のサイズ］を基準にする。 `background-position` のテキストを見よ。 [CSS3BG] refer to size of mask painting area minus size of mask layer image; see text background-position [CSS3BG]
算出値	原点を表現している 2 個のキーワードと, その原点からの 2 個のオフセットからなる — 各オフセットは、［ `<length>` として与えられた場合は絶対長さ／他の場合は百分率］として与えられる。 Consisting of: two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.
正準的順序	文法に従う
アニメーション型	繰り返し可能なリスト

各種値の定義については、 background-position プロパティを見よ。 [CSS3BG]。 See the background-position property [CSS3BG] for the definitions of the property values.

下の例では、（単独の）画像が表示域の右下隅に配置される。 In the example below, the (single) image is placed in the lower-right corner of the viewport.

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

マスク位置は、左上隅以外の隅から相対的にもなれる。例えば次のものは、背景画像を下端から 10px, 右端から 3em の所に置く： Mask positions can also be relative to other corners than the top left. E.g., the following puts the background image 10px from the bottom and 3em from the right:

mask-position: right 3em bottom 10px

mask-position 値を成すカンマで分離された値たちが，どのマスク層に寄与するかについては、複数のマスク画像の多層化法を見よ。 See the section “Layering multiple mask layer images” for how mask-position interacts with other comma-separated mask properties to form each mask layer.

7.5. マスク法区画： `mask-clip` プロパティ

名前	`mask-clip`
値	[ `<coord-box>` \| `no-clip` ]#
初期値	`border-box`
適用対象	`mask-image` と同じ All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
継承	されない
百分率	受容しない
算出値	指定されたとおり
正準的順序	文法に従う
アニメーション型	離散的

mask-clip は、 mask 要素を参照しないマスク層画像用のマスク塗り区画を決定する — それは、マスクが影響する区画を決定する。要素を成す塗られる内容は、この区画に制約するものとする。 For mask layer images that do not reference a mask element, mask-clip determines the mask painting area, which determines the area that is affected by the mask. The painted content of an element must be restricted to this area.

mask-clip プロパティは、 mask 要素を参照するマスク層画像には影響しない。そのようなマスク参照用のマスク塗り区画は、 mask 要素の［ x, y, width, height, maskUnits ］属性により決定される。 The mask-clip property has no affect on a mask layer image that references a mask element. The x, y, width, height and maskUnits attributes on the mask element determine the mask painting area for mask references.

各種値の意味は： Values have the following meanings:

<coord-box>: 塗られる内容は、指定されたキーワードによる基準ボックスに制約される（切り抜かれる） content-box • The painted content is restricted to (clipped to) the content box.padding-box • The painted content is restricted to (clipped to) the padding box.border-box • The painted content is restricted to (clipped to) the border box.fill-box • The painted content is restricted to (clipped to) the object bounding box.stroke-box • The painted content is restricted to (clipped to) the stroke bounding box.view-box • Uses the nearest SVG viewport as reference box. • If a viewBox attribute is specified for the SVG viewport creating element: The reference box is positioned at the origin of the coordinate system established by the viewBox attribute. The dimension of the reference box is set to the width and height values of the viewBox attribute.
no-clip: 塗られる内容は、制約されない（切り抜かれない）。 The painted content is not restricted (not clipped).

<coord-box> 値に対する使用値は： ↓

CSS レイアウトボックスが結び付けられていない SVG 要素においては：［ content-box ／ padding-box ］に対しては fill-box になり， border-box に対しては stroke-box になる。 For SVG elements without associated CSS layout box, the used values for content-box and padding-box compute to fill-box and for border-box compute to stroke-box.
CSS レイアウトボックスが結び付けられた要素においては：fill-box に対しては content-box になり，［ stroke-box ／ view-box ］に対しては border-box になる。 For elements with associated CSS layout box, the used values for fill-box compute to content-box and for stroke-box and view-box compute to border-box.

mask-clip 値を成すカンマで分離された値たちが，どのマスク層に寄与するかについては、複数のマスク画像の多層化法を見よ。 See the section “Layering multiple mask layer images” for how mask-clip interacts with other comma-separated mask properties to form each mask layer.

7.6. 位置決め区画： `mask-origin` プロパティ

名前	`mask-origin`
値	`<coord-box>`#
初期値	`border-box`
適用対象	`mask-image` と同じ All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
継承	されない
百分率	受容しない
算出値	指定されたとおり
正準的順序	文法に従う
アニメーション型	離散的

単独のボックスとして描画される要素に対しては、マスク位置決め区画を指定する。複数個のボックスとして描画される要素（例：何行かにわたる行内ボックス, 何ページかにわたるボックス）に対し，どのボックスに演算してマスク位置決め区画を決定するかは、 box-decoration-break により指定される。 For elements rendered as a single box, specifies the mask positioning area. For elements rendered as multiple boxes (e.g., inline boxes on several lines, boxes on several pages) specifies which boxes box-decoration-break operates on to determine the mask positioning area.

<coord-box>: 位置は、指定されたキーワードによる基準ボックスに相対的になる。（ 0 0 はボックスの左上隅, 100% 100% は右下隅になる。） content-box • The position is relative to the content box.padding-box • The position is relative to the padding box. (For single boxes 0 0 is the upper left corner of the padding edge, 100% 100% is the lower right corner.)border-box • The position is relative to the border box.fill-box • The position is relative to the object bounding box.stroke-box • The position is relative to the stroke bounding box.view-box • Uses the nearest SVG viewport as reference box. • If a viewBox attribute is specified for the SVG viewport creating element: The reference box is positioned at the origin of the coordinate system established by the viewBox attribute. The dimension of the reference box is set to the width and height values of the viewBox attribute.

<coord-box> 値に対する使用値†は： ↓

CSS レイアウトボックスが結び付けられていない SVG 要素においては：［ content-box ／ padding-box ／ border-box ］に対しては、 fill-box になる。 For SVG elements without associated CSS layout box, the values content-box, padding-box and border-box compute to fill-box.
CSS レイアウトボックスが結び付けられた要素においては：［ fill-box ／ stroke-box ／ view-box ］に対しては、初期値と同じ border-box になる。 For elements with associated CSS layout box, the values fill-box, stroke-box and view-box compute to the initial value of mask-origin.

【† 原文には “算出される” としか述べられていないが、算出値と解釈するとプロパティ定義表の “算出値” の欄に反することに加え，他所の記述とも一貫していないので、使用値と解釈する他にないであろう。】

注記： mask-origin プロパティは、 background-origin プロパティ [CSS3BG] に類似するが，［それがとり得る値たちが成す集合／その初期値］は異なる。 Note: The mask-origin property is similar to the background-origin property [CSS3BG], but it has a different set of values, and a different initial value.

注記： mask-clip は padding-box, mask-origin は border-box, mask-position は top left （初期値）にされていて，要素のボーダーは 0 でない場合、マスク層画像の上端と左端は切り取られることになる。 Note: If mask-clip is padding-box, mask-origin is border-box, mask-position is top left (the initial value), and the element has a non-zero border, then the top and left of the mask layer image will be clipped.

mask-origin 値を成すカンマで分離された値たちが，どのマスク層に寄与するかについては、複数のマスク画像の多層化法を見よ。 See the section “Layering multiple mask layer images” for how mask-origin interacts with other comma-separated mask properties to form each mask layer.

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

名前	`mask-size`
値	`<bg-size>`#
初期値	`auto`
適用対象	`mask-image` と同じ All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
継承	されない
百分率	受容しない
算出値	長さは絶対化される／他は指定されたとおり as specified, but with lengths made absolute
正準的順序	文法に従う
アニメーション型	繰り返し可能なリスト

マスク層画像のサイズを指定する。 Specifies the size of the mask layer images.

各種値の定義については、 background-size プロパティを見よ。 [CSS3BG]。 See background-size property [CSS3BG] for the definitions of the property values.

mask-size 値を成すカンマで分離された値たちが，どのマスク層に寄与するかについては、複数のマスク画像の多層化法を見よ。 See the section “Layering multiple mask layer images” for how mask-size interacts with other comma-separated mask properties to form each mask layer.

7.8. マスク層の組成法： `mask-composite` プロパティ

名前	`mask-composite`
値	`<compositing-operator>`#
初期値	`add`
適用対象	すべての要素。 SVG においては、［ `defs` 要素以外のコンテナ要素／グラフィックス要素］に適用される。 All elements. In SVG, it applies to container elements without the defs element and all graphics elements
継承	されない
百分率	受容しない
算出値	指定されたとおり
正準的順序	文法に従う
アニメーション型	離散的

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

各キーワードは、ある Porter-Duff 組成演算子 [COMPOSITING-1] を表現する — それは、［現在のマスク層とその下にある（奥にある）マスク層たち］を組成するときに利用される組成演算を定義する。 Each keyword represents a Porter-Duff compositing operator [COMPOSITING-1] which defines the compositing operation used on the current mask layer with the mask layers below it.

以下においては、ソースは現在のマスク層を指し， dest はソースの下にあるすべてのマスク層の累積 — すなわち，それぞれに対応する組成演算子を順に適用した結果 — を指すとする。 In the following, the current mask layer is referred to source, all mask layers below it (with the corresponding compositing operators applied) are referred to destination.

add: ソースは、 dest の上に配置される（Porter-Duff 組成演算子 source-over を見よ）。 The source is placed over the destination. (See Porter-Duff compositing operator source over for more details.)
subtract: ソースは、 dest の外側に入る所に配置される（Porter-Duff 組成演算子 source-out を見よ）。 The source is placed, where it falls outside of the destination. (See Porter-Duff compositing operator source out for more details.)
intersect: ソースは、 dest に重なり合う部分を置換する（Porter-Duff 組成演算子 source-in を見よ）。 The parts of source that overlap the destination, replace the destination. (See Porter-Duff compositing operator source in .)
exclude: ソースと dest とが重なり合わない領域が組み合される。（Porter-Duff 組成演算子 xor を見よ）。 The non-overlapping regions of source and destination are combined. (See Porter-Duff compositing operator XOR.)

更なるマスク層が無い場合†、組成演算子は無視するものとする。マスク層は、要素の内容や要素の背後にある内容とは組成しないものとする — それらは隔離されたグループの中に描画されたかのように動作するものとする。 If there is no further mask layer, the compositing operator must be ignored. Mask layers must not composite with the element’s content or the content behind the element, instead they must act as if they are rendered into an isolated group.

【† すなわち，dest が無い場合 — 言い換えれば、対応するマスク層画像は mask-image プロパティの値を成す最後の <mask-reference> である場合。】

現在のマスク層より下にあるすべてのマスク層は、現在のマスク層に対し組成演算を適用する前に組成するものとする。 All mask layers below the current mask layer must be composited before applying the compositing operation for the current mask layer.

以下の例では、次の 2 つのマスク層画像 rect.svg, circle.svg が利用される【図の黒は、マスク値 1 を表す】： This example uses two mask layer images: circle.svg and rect.svg.

両マスク層画像とも， mask-image プロパティから参照される： Both mask layer images are references with the mask-image property:

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

マスク層 rect.svg は、マスク層 circle.svg より下に（利用者から見て奥に）ある。 The mask layer with rect.svg is below the mask layer with circle.svg. That means circle.svg is closer to the user than rect.svg.

mask-composite プロパティにより、作者は異なる仕方を選んで複数のマスク層を組み合せれる。 With the property mask-composite the author may choose different ways to combine multiple mask layers.

add は rect.svg の上に circle.svg を塗るようにする。そのふるまいは、組成演算子 source-over により述べられる。 add paints the circle.svg on top of rect.svg. The behavior is described by the compositing operator source over.
```
mask-composite: add;
```
subtract は、 circle.svg の［ rect.svg に重なり合わない部位］だけを塗るようにする。そのふるまいは、組成演算子 source-out により述べられる。 subtract paints portions of circle.svg that do not overlap rect.svg. The behavior is described by the compositing operator source out.
```
mask-composite: subtract;
```
intersect は、 circle.svg と rect.svg が重なり合う部位を塗るようにする。そのふるまいは、組成演算子 source-in により述べられる。 intersect paints portions of circle.svg that overlap rect.svg. The behavior is described by the compositing operator source in.
```
mask-composite: intersect;
```
exclude は、 circle.svg と rect.svg が重なり合わない部位を塗るようにする。そのふるまいは、組成演算子 xor により述べられる。 exclude paints portions of circle.svg and rect.svg that do not overlap. The behavior is described by the compositing operator XOR.
```
mask-composite: exclude;
```

次の例は、 2 個のマスク層と 2 個の組成演算子を指定する。 The following example specifies two mask layers and two compositing operators.

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

rect.svg, circle.svg は、 add 組成演算子を用立てる。 exclude を利用するマスク層はもう無いので， exclude は無視される。 rect.svg and circle.svg make use of the add compositing operator. There is no further mask layer to use exclude and therefore, exclude is ignored.

異なる組成演算子を伴う 3 個のマスク層の例： This is an example of 3 mask layers with different compositing operators.

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

まず， rect.svg に circle.svg が “加算される”。次に， trapeze.svg （左図）の部位のうち［最初の 2 層を組成した結果とが重なり合わない部位］のみを可視にする。【この記述と，その結果を示す右図とが整合していない（ subtract が intersect であったなら整合するが）。】 First, circle.svg is “added” to rect.svg. In a second step, only portions of trapeze.svg that are not overlapping the compositing result of the previous two layers is visible.

mask-composite 値を成すカンマで分離された値たちが，どのマスク層に寄与するかについては、複数のマスク画像の多層化法を見よ。 See the section “Layering multiple mask layer images” for how mask-composite interacts with other comma-separated mask properties to form each mask layer.

7.9. マスク略式： `mask` プロパティ

名前	`mask`
値	`<mask-layer>`#
初期値	個々のプロパティを見よ
適用対象	`mask-image` と同じ All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
継承	されない
百分率	個々のプロパティを見よ
算出値	個々のプロパティを見よ
正準的順序	文法に従う
アニメーション型	個々のプロパティを見よ

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

<mask-layer> 値を成す各成分は、在るならば，次の対応関係の下で各種 mask-* 下位プロパティを設定する：

プロパティ	成分
`mask-image`	`<mask-reference>`
`mask-position`	`<position>`
`mask-size`	`<bg-size>`
`mask-repeat`	`<repeat-style>`
`mask-origin`	1 個目の `<geometry-box>`
`mask-clip`	2 個目の `<geometry-box>`, または `no-clip` — ただし，どちらも無い場合は 1 個目の `<geometry-box>` （それが `mask-origin`, `mask-clip` とも設定する）。
`mask-composite`	`<compositing-operator>`
`mask-mode`	`<masking-mode>`

If one <geometry-box> value and the no-clip keyword are present then <geometry-box> sets mask-origin and no-clip sets mask-clip to that value.If one <geometry-box> value and no no-clip keyword are present then <geometry-box> sets both mask-origin and mask-clip to that value.If two <geometry-box> values are present, then the first sets mask-origin and the second mask-clip.

<mask-reference> が mask 要素を参照する場合、［ mask-repeat ／ mask-position ／ mask-clip ／ mask-origin ／ mask-size ］のプロパティの使用値による効果は生じさせないものとする。この事例では、 mask 要素がマスク層画像の［位置, サイズ法, 切り抜き］を定義する。 The used value of the properties mask-repeat, mask-position, mask-clip, mask-origin and mask-size must have no effect if <mask-reference> references a mask element. In this case the element defines position, sizing and clipping of the mask layer image.

mask 略式は、 mask-border もその初期値に設定し直す【したがって、その下位プロパティたちも初期値に設定し直す】。したがって作者には、［カスケード内で先に現れるマスク設定群を上書きする］ときには — 他の略式や個々のプロパティよりも — mask 略式を利用することが推奨される。そうすれば、［新たなスタイルの効果が生じるよう， mask-border を設定し直す］ことも確保されるので。 The mask shorthand also resets mask-border to its initial value. It is therefore recommended that authors use the mask shorthand, rather than other shorthands or the individual properties, to override any mask settings earlier in the cascade. This will ensure that mask-border has also been reset to allow the new styles to take effect.

7.10. マスク画像描画モデル

CSS ボックスモデルで整形される要素に対する none 以外の値を伴う mask-image プロパティの適用は、 opacity の値が 1 未満のときと同じ仕方で，積層文脈を確立する。したがって，要素のすべての子孫は、グループ一体としてマスク法が適用された上で，グループとして一緒に描画される。 The application of the mask-image property with a value other than none to an element formatted with the CSS box model establishes a stacking context in the same way that CSS opacity [CSS3COLOR] does, and all the element’s descendants are rendered together as a group with the masking applied to the group as a whole.

mask-image プロパティには、どの要素の CSS ボックスに対しても，その幾何や接触判定に対する効果は無い。 The mask-image property has no effect on the geometry or hit-testing of any element’s CSS boxes.

mask プロパティは、 SVG 要素用の呈示属性である。 The mask property is a presentation attribute for SVG elements.

7.10.1. マスクの処理法

以下におけるマスク画像は、［マスク層画像／マスクボーダー画像］の総称を表す。 In the following section, mask image refers either to a mask layer image or to a mask border image.

マスク画像は、マスク値を計算するときには，次の 2 種いずれかの手法を利用して解釈される — その結果が、マスクされるオブジェクトのアルファ値に乗算されることになる。 A mask image may be interpreted using one of two different methods with regards to calculating the mask values that will be multiplied with the target alpha values.

（単純に）マスク画像のアルファチャネルを利用する： The first and simplest method of calculating the mask values is to use the alpha channel of the mask image.＼

この手法では、所与の地点におけるマスク値は，単純にその地点におけるアルファチャネルの値になる。色チャネルは、マスク値に寄与しない。 In this case the mask value at a given point is simply the value of the alpha channel at that point. The color channels do not contribute to the mask value.

マスク画像の輝度を利用する： The second method of calculating the mask values is to use the luminance of the mask image.＼

この手法では、所与の地点におけるマスク値は，画像を成す各画素の色チャネル値とアルファチャネル値から次の手続きを利用して算出される： In this case the mask value at a given point is computed from the color channel values and alpha channel value using the following procedure.

色チャネル値から輝度値を算出する： Compute a luminance value from the color channel values.
1. mask 要素の color-interpolation の算出値は linearRGB の場合、元の画像の（sRGB 色空間に属し得る）色値を線形 RGB 色空間に変換する。 If the computed value of color-interpolation on the mask element is linearRGB, convert the original image color values (potentially in the sRGB color space) to the linearRGB color space.
2. 乗算済みでない RGB 色値に［輝度をアルファに換算する係数］を適用して，輝度値に変換する（ feColorMatrix 要素【の type 属性用の値 luminanceToAlpha 】に定義されるとおり。） Then, using non-premultiplied RGB color values, apply the luminance-to-alpha coefficients (as defined in the feColorMatrix filter primitive [SVG11]) to convert the RGB color values to luminance values.
算出された輝度値に画素のアルファ値を乗算して，マスク値を生産する。 Multiply the computed luminance value by the corresponding alpha value to produce the mask value.

利用される手法を問わず、マスク値を計算する手続きでは，マスクを成す【元のマスク画像の】内容は 4 チャネル RGBA グラフィックスオブジェクトであるものと見做される。他の型のグラフィックスオブジェクトに対しては、特別な取り扱いが要求される： Regardless of the method used, the procedure for calculating mask values assumes the content of the mask is a four-channel RGBA graphics object. For other types of graphics objects, special handling is required as follows.

3 チャネル RGB グラフィックスオブジェクトが利用されている場合（例： 3 チャネル画像ファイルを参照しているとき）の効果は、［オブジェクトは，アルファチャネルが一様に 1 に設定された， 4 チャネル RGBA 画像に変換されていた］かのようになる。 For a three-channel RGB graphics object that is used in a mask (e.g., when referencing a three-channel image file), the effect is as if the object were converted into a four-channel RGBA image with the alpha channel uniformly set to 1.
単チャネル画像が利用されている場合（例：単チャネルグレイスケール画像ファイルを参照しているとき）の効果は、そのチャネルが RGB 各色チャネルを与えているものとみなす下で，前項を適用する。 For a single-channel image that is used in a mask (e.g., when referencing a single-channel grayscale image file), the effect is as if the object were converted into a four-channel RGBA image, where the single channel from the referenced object is used to compute the three color channels and the alpha channel is uniformly set to 1.

注記：グレイスケール画像ファイルを参照しているときに，色チャネルを算出するときには、［符号化されたグレイスケール値と線型明度値を関係付ける伝達曲線† ］も，織り込むものとする。【†おそらく，srgb に定義されるそれを指す。】 Note: When referencing a grayscale image file, the transfer curve relating the encoded grayscale values to linear light values must be taken into account when computing the color channels.

注記： SVG グラフィックス要素（例： circle や text ）は、マスク法演算の目的においては，どれも 4 チャネル RGBA 画像として扱われる。 Note: SVG graphics elements (e.g., circle or text) are all treated as four-channel RGBA images for the purposes of masking operations.

マスクの効果は、［マスクが無い代わりに、所与のオブジェクトのアルファチャネルは，結果のマスク値で乗算された］とするときに起こる結果に一致する。 The effect of a mask is identical to what would have happened if there were no mask but instead the alpha channel of the given object were multiplied with the mask’s resulting mask values.

マスク画像により覆われない領域は、透明な黒として扱われる。そこでのマスク値は 0 になる。 Regions not covered by a mask image are treated as transparent black. The mask value is 0.

注記： mask-repeat によりマスクのマスク画像が繰り返される場合、各画像は間隔を空けて敷き詰められることもある。そのような合間の空間は、透明な黒のマスクとして扱われる。 Note: Masks with repeating mask image tiles may have an offset to each other. The space between the mask images is treated as a transparent black mask.

7.10.2. 複数のマスク画像の多層化法

ボックスのマスクは、複数の層からなり得る。層の枚数は、 mask-image プロパティ用のカンマで分離された値の個数により決定される。 <mask-reference> リスト内の値が none であっても，依然として層を作成する。 § 複数の背景画像の多層化法 [CSS3BG] を見よ。 The mask of a box can have multiple layers. The number of layers is determined by the number of comma-separated values for the mask-image property. A value of none in a list of values with other <mask-reference>s still creates a layer.See Layering Multiple Background Images [CSS3BG].

mask-mode, mask-composite については， [CSS3BG] には相応するものは無いが、相応するものがあるマスクプロパティに対するときと同じ様に，各層に対応付けられるカンマで分離された値リストを与える — 値リストを成す値の個数が層数に一致しない場合の取り扱いも含め。 mask-mode and mask-composite do not have counterparts in CSS Backgrounds and Borders [CSS3BG]. Just like for the mask properties that do have a counterpart, the list of values are matched up from the first value: excess values at the end are not used. If a property doesn’t have enough comma-separated values to match the number of layers, the UA must calculate its used value by repeating the list of values until there are enough.

すべてのマスク層画像は、（必要とされるなら）アルファマスクに変形されてから（マスクの処理法を見よ）， mask-composite により指定された組成演算子も織り込んで組成することにより，組み合される。 All mask layer images are transformed to alpha masks (if necessary see Mask processing) and combined by compositing taking the compositing operators specified by mask-composite into account.

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

mask-border により，画像を［ 4 隅, 4 辺, 真中］からなる 9 個の片に分割できる — 下の図にデモられるとおり： With mask-border an image can be split into nine pieces: four corners, four edges and the middle piece as demonstrated in the figure below.

マスクボーダー画像を成す各片。 Pieces of a mask border image.

これらの各片は、マスクボーダー画像区画のサイズに収まるように，様々な仕方で［切分けられ, 拡縮され, 伸張され］得る。このように歪められた画像が，マスクとして利用される。 mask-border の構文は、 [CSS3BG] の border-image プロパティに対応する。 These pieces may be sliced, scaled and stretched in various ways to fit the size of the mask border image area. This distorted image is then used as a mask. The syntax of mask-border corresponds to the border-image property of CSS Background and Borders [CSS3BG].

次の例におけるマスクボーダー画像（図中央）は、［ 4 隅, 4 辺, 真中］の片に分割され, 伸張され, 拡縮される。 The mask border image in the following example is split into four corners with dimensions of 75 pixels, four edges and the middle piece that is stretched and scaled.

Example for 'mask-border' — `mask-border` 用の例。図の左から順に：マスクされるオブジェクト, アルファマスク, マスクした結果のオブジェクト。 Example for mask-border. The object on the left is the object to mask. The second image is the alpha mask and the last image the masked object.

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-source`
値	`none` \| `<image>`
初期値	`none`
適用対象	`mask-image` と同じ All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
継承	されない
百分率	受容しない
算出値	キーワード `none` ／ `<image>` の算出値 they keyword none or the computed <image>
正準的順序	文法に従う
アニメーション型	離散的

マスクボーダー画像として利用される画像を指定する。 Specifies an image to be used as mask border image.

次に該当する画像は、無視され，要素をマスクしない — それでも，マスクボーダー画像として数えられるが：空画像である（横幅または縦幅が 0 ）／ダウンロードに失敗した／存在しない／表示できない（例：サポートされる画像形式でない） An image that is an empty image (zero width or zero height), that fails to download, is non-existent, or that cannot be displayed (e.g. because it is not in a supported image format) is ignored. It still counts as an mask border image but does not mask the element.

マスクボーダー画像を処理する方法は、マスクの処理法を見よ。 See “Mask processing” on how to process the mask border image.

算出値が none 以外になる場合 — opacity の値が 1 未満のときと同じ仕方で — 積層文脈を作成させる。 [CSS21] A computed value of other than none results in the creation of a stacking context [CSS21] the same way that CSS opacity [CSS3COLOR] does for values other than 1.

［ mask-border-source, mask-image ］は、互いに独立に指定できる。両プロパティとも none 以外の値をとる場合、要素は両マスク法演算により順にマスクされる。 mask-border-source and mask-image can be specified independent of each other. If both properties have a value other than none, the element is masked by both masking operations one after the other.

注記： mask-image, mask-border-source どちらの演算を先に適用しようが、描画した結果は同じになる。 Note: It does not matter if mask-image is applied to the element before or after mask-border-source. Both operation orders result in the same rendering.

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

名前	`mask-border-mode`
値	`luminance` \| `alpha`
初期値	`alpha`
適用対象	`mask-image` と同じ All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
継承	されない
百分率	受容しない
算出値	指定されたとおり
正準的順序	文法に従う
アニメーション型	離散的

mask-border-mode プロパティは、 mask-border-source 用の <image> 値は［輝度マスク, アルファマスク］のどちらとして扱われるかを指示する（マスクの処理法を見よ）。 The mask-border-mode property indicates whether the <image> value for mask-border-source is treated as luminance mask or alpha mask. (See Mask processing.)

各種値の意味は： Values have the following meanings:

alpha: マスクボーダー画像のアルファ値がマスク値として利用されるべきであることを指示する。マスク値の計算法を見よ。 A value of alpha indicates that the alpha values of the mask border image should be used as the mask values. See Calculating mask values.
luminance: マスクボーダー画像の輝度値がマスク値として利用されるべきであることを指示する。マスク値の計算法を見よ。 A value of luminance indicates that the luminance values of the mask border image should be used as the mask values. See Calculating mask values.

［ mask-mode ／ mask-type ］プロパティは、マスクボーダー画像の型【当のマスク画像におけるアルファチャネルの有無など？】には影響させないものとする。 The mask-mode and mask-type properties must have no affect on the mask border image type.

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

名前	`mask-border-slice`
値	[ `<number>` \| `<percentage>` ]{1,4} `fill`?
初期値	`0`
適用対象	`mask-image` と同じ All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
継承	されない
百分率	マスクボーダー画像のサイズを基準にする refer to size of the mask border image
算出値	指定されたとおり
正準的順序	文法に従う
アニメーション型	離散的

このプロパティは、マスクボーダー画像を 9 個の領域 — 4 隅, 4 辺, 真中 — に分割するときの［上端, 右端, 下端, 左端］辺からの内方オフセットを指定する。真中部位の画像は、 fill キーワードが無い場合には，破棄され，全部的に不透明な白として扱われる（真中部位に覆われる内容は，マスクされず透過する）。 This property specifies inward offsets from the top, right, bottom, and left edges of the mask border image, dividing it into nine regions: four corners, four edges and a middle. The middle image part is discarded and treated as fully opaque white (the content covered by the middle part is not masked and shines through) unless the fill keyword is present.

各種値の定義については、 border-image-slice プロパティを見よ。 [CSS3BG] 。 See the border-image-slice property [CSS3BG] for the definitions of the property values.

8.4. マスク法区画： `mask-border-width` プロパティ

名前	`mask-border-width`
値	[ `<length-percentage>` \| `<number>` \| auto ]{1,4}
初期値	`auto`
適用対象	`mask-image` と同じ All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
継承	されない
百分率	マスクボーダー画像区画の横幅／縦幅に相対的 relative to width/height of the mask border image area
算出値	`<length>` は絶対化される／他は指定されたとおり all <length>s made absolute, otherwise as specified
正準的順序	文法に従う
アニメーション型	離散的

マスクボーダー画像はマスクボーダー画像区画と呼ばれる区画の内側に描かれる。この区画の境界は、既定では，ボーダーボックスに対応する — mask-border-outset を見よ。 The mask border image is drawn inside an area called the mask border image area. This is an area whose boundaries by default correspond to the border box, see mask-border-outset.

各種値の定義については、 border-image-width プロパティを見よ。 [CSS3BG] See the border-image-width property [CSS3BG] for the definitions of the property values.

注記：レイアウトボックスが結び付けられない SVG 要素に対しては、 border-width は 0 と見なされる。 Note: For SVG elements without an associated layout box the border-width is considered to be 0.

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

名前	`mask-border-outset`
値	[ `<length>` \| `<number>` ]{1,4}
初期値	`0`
適用対象	`mask-image` と同じ All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
継承	されない
百分率	受容しない
算出値	`<length>` はすべて絶対化される／他は指定されたとおり all <length>s made absolute, otherwise as specified
正準的順序	文法に従う
アニメーション型	離散的

値は、マスクボーダー画像区画がボーダーボックスを超えて拡張する量を指定する。成分値たちは、ボーダーの各辺から区画を成す各辺までの外方オフセットを時計回りに設定する。 The values specify the amount by which the mask border image area extends beyond the border box. If it has four values, they set the outsets on the top, right, bottom and left sides in that order. If the left is missing, it is the same as the right; if the bottom is missing, it is the same as the top; if the right is missing, it is the same as the top.

mask-border-width と同じく、 <number> は，対応する border-width の何倍になるかを表現する。負な値は、 mask-border-outset を成すどの値にも許容されない。 As with mask-border-width, a <number> represents a multiple of the corresponding border-width. Negative values are not allowed for any of the mask-border-outset values.

注記：レイアウトボックスが結び付けられない SVG 要素に対しては、 border-width は 0 と見なされる。 Note: For SVG elements without associated layout box the border-width is considered to be 0.

8.6. マスクボーダー画像の敷き詰め法： `mask-border-repeat` プロパティ

名前	`mask-border-repeat`
値	[ `stretch` \| `repeat` \| `round` \| `space` ]{1,2}
初期値	`stretch`
適用対象	`mask-image` と同じ All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
継承	されない
百分率	受容しない
算出値	指定されたとおり
正準的順序	文法に従う
アニメーション型	離散的

このプロパティは、マスクボーダー画像の［各側, 真中］部位用の画像が，どう拡縮され, 敷き詰められるかを指定する。 1 個目, 2 個目のキーワードは、順に［横方向, 縦方向］側に適用される。 2 個目のキーワードが無い場合、 1 個目と同じと見做される。 This property specifies how the images for the sides and the middle part of the mask border image are scaled and tiled. The first keyword applies to the horizontal sides, the second to the vertical ones. If the second keyword is absent, it is assumed to be the same as the first.

各種値の定義については、 border-image-repeat プロパティを見よ。 [CSS3BG] See the border-image-repeat property [CSS3BG] for the definitions of the property values.

マスクボーダー画像を成す各部を拡縮して敷き詰めるための正確な処理は、 § マスクボーダー画像によるマスク法にて与えられる The exact process for scaling and tiling the mask border image parts is given in the section Masking with the mask border image

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

名前	`mask-border`
値	`<'mask-border-source'>` \|\| `<'mask-border-slice'>` [ / `<'mask-border-width'>`? [ / `<'mask-border-outset'>` ]? ]? \|\| `<'mask-border-repeat'>` \|\| `<'mask-border-mode'>`
初期値	個々のプロパティを見よ
適用対象	個々のプロパティを見よ
継承	されない
百分率	受容しない
算出値	個々のプロパティを見よ
正準的順序	文法に従う
アニメーション型	個々のプロパティを見よ

これは、次に挙げるプロパティを設定するための略式プロパティである — 省略された値は、それぞれの初期値に設定される：mask-border-source, mask-border-slice, mask-border-width, mask-border-outset, mask-border-repeat, mask-border-mode, This is a shorthand property for setting mask-border-source, mask-border-slice, mask-border-width, mask-border-outset, mask-border-repeat and mask-border-mode. Omitted values are set to their initial values.

注記： mask 略式プロパティは、上に挙げた各種 mask-border-* プロパティを設定し直す。 Note: The mask shorthand resets the properties mask-border, mask-border-source, mask-border-slice, mask-border-width, mask-border-outset, mask-border-repeat and mask-border-mode.

8.8. マスクボーダー画像によるマスク法

mask-border-source により与えられたマスクボーダー画像が mask-border-slice 値により切分けられた結果の 9 個の画像は、 § ボーダー画像の描画法に述べられるように，4 段の手続きを経て，それぞれに対応するマスクボーダー画像領域の中へ拡縮され, 位置され, 敷き詰められる [CSS3BG] 。 After the mask border image given by mask-border-source is sliced by the mask-border-slice values, the resulting nine images are scaled, positioned, and tiled into their corresponding mask border image regions in four steps as described in the section Drawing the Border Image [CSS3BG].

CSS ボックスモデルで整形される要素に対する mask-border-source プロパティの適用は — opacity の値が 1 未満のときと同じ仕方で — 積層文脈を確立させる。要素のすべての子孫は、一体のグループとしてマスク法が適用された上で，グループとして一緒に描画される。 The application of the mask-border-source property to an element formatted with the CSS box model establishes a stacking context in the same way that CSS opacity [CSS3COLOR] does, and all the element’s descendants are rendered together as a group with the masking applied to the group as a whole.

mask-border-source プロパティは、どの要素の CSS ボックスに対しても，その幾何や接触判定に対する効果は無い。 The mask-border-source property has no effect on the geometry or hit-testing of any element’s CSS boxes.

9. SVG によるマスクソース

9.1. `mask` 要素

名前	`mask`
分類	コンテナ要素, 決して描画されない要素 container elements, never-rendered element
内容モデル	任意個数, 任意順序の，次に挙げる要素：アニメーション要素, 記述的要素, 図形要素, 構造上の要素, gradient 要素, `a`, `clipPath`, `color-profile`, `cursor`, `filter`, `font`, `font-face`, `foreignObject`, `image`, `marker`, `mask`, `pattern`, `script`, `style`, `switch`, `view`, `text`, `altGlyphDef`
属性	条件付き処理属性, 中核属性, 呈示属性, `class`, `style`, `x`, `y`, `width`, `height`, `maskUnits`, `maskContentUnits`
DOM インタフェース	`SVGMaskElement`

属性定義：

maskUnits = "userSpaceOnUse | objectBoundingBox"

［ x, y, width, height ］属性用の座標系（これらの属性はどのような座標系における値を表現するか）を定義する。 mask プロパティを介してこの要素を参照している要素（すなわち，この要素が定義するマスクが適用される要素）を E で表すとき、この座標系は，指定された値に応じて次で与えられる： Defines the coordinate system for attributes x, y, width and height.

userSpaceOnUse: E 用の利用元座標系に一致するように確立される。 [CSS3-TRANSFORMS] x, y, width and height represent values in the current user coordinate system [CSS3-TRANSFORMS] in place at the time when the mask element is referenced (i.e., the user coordinate system for the element referencing the mask element via the mask property).
objectBoundingBox: 座標［ (0, 0) ／ (1, 1) ］が E の限界ボックスの［左上隅／右下隅］に写像されるように確立される。その利用元単位と CSS px 単位は等価になる。 x, y, width and height represent fractions or percentages of the object bounding box of the element to which the mask is applied. User coordinates are sized equivalently to the CSS px unit.

この属性が指定されていない場合の効果は、値 objectBoundingBox が指定されていたかのようになる。 If attribute maskUnits is not specified, then the effect is as if a value of objectBoundingBox were specified.

アニメート可能。 Animatable: yes.

maskContentUnits = "userSpaceOnUse | objectBoundingBox"

mask 要素の内容用の利用元座標系を定義する。この座標系は、指定された値に応じて， maskUnits 属性に対するときと同様に定義される。 Defines the coordinate system for the contents of the mask.userSpaceOnUse • The user coordinate system for the contents of the mask element is the current user coordinate system in place at the time when the mask element is referenced (i.e., the user coordinate system for the element referencing the mask element via the mask property).objectBoundingBox • The coordinate system has its origin at the top left corner of the bounding box of the element to which the clipping path applies to and the same width and height of this bounding box. User coordinates are sized equivalently to the CSS px unit.

この属性が指定されていない場合の効果は、値 userSpaceOnUse が指定されていたかのようになる。 If attribute maskContentUnits is not specified, then the effect is as if a value of userSpaceOnUse were specified.

アニメート可能。 Animatable: yes.

x = "<length-percentage>"

可能な最も広いスクリーン外バッファ用の矩形を成す左上隅の x-軸座標を与える。この属性が指定されていない場合の効果は、要素が下に与える条件 (A) が満たすならば，値 -10% が指定されていたかのようになる。 The x-axis coordinate of one corner of the rectangle for the largest possible offscreen buffer. If the attribute is not specified but at least one of the attributes y, width or height are specified, the effect is as if a value of -10% were specified.

アニメート可能。 Animatable: yes.

y = "<length-percentage>"

y-軸座標を与えることを除き、 x 属性と同じに定義される。 The y-axis coordinate of one corner of the rectangle for the largest possible offscreen buffer. If the attribute is not specified but at least one of the attributes x, width or height are specified, the effect is as if a value of -10% were specified.Animatable: yes.

width = "<length-percentage>"

可能な最も広いスクリーン外バッファの横幅を与える。値が 0 以下の場合、要素の描画は不能化される。この属性が指定されていない場合の効果は、要素が下に与える条件 (A) を満たすならば，値 120% が指定されていたかのようになる。 The width of the largest possible offscreen buffer. A negative value or a value of zero disables rendering of the element. If the attribute is not specified but at least one of the attributes x, y or height are specified, the effect is as if a value of 120% were specified.

アニメート可能。 Animatable: yes.

height = "<length-percentage>"

バッファの縦幅を与えることを除き、 width 属性と同じに定義される。 The height of the largest possible offscreen buffer. A negative value or a value of zero disables rendering of the element. If the attribute is not specified but at least one of the attributes x, y or width are specified, the effect is as if a value of 120% were specified.Animatable: yes.

要素が下に与える条件 (A) を満たすならば、所与の【マスクされる】オブジェクトと［ x, y, width, height ］により定義される矩形は，【オブジェクトの】現在の切り抜きパスを確立する。マスク【されるオブジェクト】の描画される内容は、この切り抜きパスで切り抜くものとする。 If at least one of the attributes x, y, width or height are specified, the given object and the rectangle defined by x, y, width and height establish a current clipping path. The rendered content of the mask must be clipped by this current clipping path.

上で利用される条件 (A) は、次で与えられる：要素には［ x, y, width, height ］いずれかの属性は指定されている【なぜこの条件が必要とされるのか／この条件が満たされない場合のふるまいについては言及されていない。】 ↑↑

mask 要素は、先祖から CSS プロパティを継承するが， mask 要素を参照している要素からは継承しない。 CSS properties inherit into the mask element from its ancestors; properties do not inherit from the element referencing the mask element.

mask 要素は、直に描画されることは決してない。その用途は、 mask プロパティを利用して参照する他にない。［ opacity, filter, display ］プロパティは、 mask 要素には適用されない。特に，［ mask 要素, およびその先祖］の display プロパティの値が何であれ、 mask 要素は，直に描画されることはなく, また参照用に可用になる。 mask elements are never rendered directly; their only usage is as something that can be referenced using the mask property. The opacity, filter and display properties do not apply to the mask element; thus, mask elements are not directly rendered even if the display property is set to a value other than none, and mask elements are available for referencing even when the display property on the mask element or any of its ancestors is set to none.

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

名前	`mask-type`
値	`luminance` \| `alpha`
初期値	`luminance`
適用対象	`mask` 要素
継承	されない
百分率	受容しない
算出値	指定されたとおり
正準的順序	文法に従う
アニメーション型	離散的

mask-type プロパティは、 mask 要素の内容は［輝度マスク, アルファマスク］のどちらとして扱われるかを定義する。マスク値の計算法を見よ。 The mask-type property defines whether the content of the mask element is treated as as luminance mask or alpha mask, as described in Calculating mask values.

各種値の意味は： Values have the following meanings:

luminance: マスクの輝度値が利用されるべきであることを指示する。 Indicates that the luminance values of the mask should be used.
alpha: マスクのアルファ値が利用されるべきであることを指示する。 Indicates that the alpha values of the mask should be used.

mask-type プロパティは、作者が， mask 要素に選好するマスク法モードを指定できるようにする。しかしながら，作者は、マスクされる内容上の mask-mode 値を match-source と異なる何かに設定することで，この選好を上書きできる。 The mask-type property allows the author of the mask element to specify the preferred masking mode. However, the author can override this preference by setting the mask-mode value to something different than match-source on the masked content.

次の例では、 mask-type の算出値は luminance に, mask-mode の算出値は match-source になる。 UA は、 mask 要素上で【 mask-mode により】定義される，選好されるマスク法モードに従うものとする。 In the following example the computed value of mask-type is luminance and the computed value of mask-mode is match-source. The UA must follow the preferred masking mode defined on the mask element.

<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>

次の例では、 mask-mode の算出値は alphaになり， mask 要素上の luminance に算出される選好を上書きする。マスク層画像は、アルファマスクとして利用される。 In the next example the computed value of mask-mode is alpha and overrides the preference on the mask element that is computed to luminance. The mask layer image is used as an alpha mask.

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

<p style="mask-image: url(#mask2); mask-mode: alpha;">
   <!-- 
マスクされる内容
This is the masked content. -->
</p>

mask-type プロパティは、 SVG 要素用の呈示属性である。 The mask-type property is a presentation attribute for SVG elements.

プライバシーの考慮点

マスク法演算【§ 組成法】の計時は、各マスク層画像を成す画素に依存しないことが重要になる。マスク法演算は、［画素値に関わらず，かかる時間は常に同じになる仕方］で実装するものとする。この規則に従わなかった場合、攻撃者は情報を推定して，計時攻撃を仕掛けることもできる。 It is important that the timing to the masking operations is independent of the source and destination pixel. Masking operations must be implemented in such a way that they always take the same amount of time regardless of the pixel values. If this rule is not followed, an attacker could infer information and mount a timing attack.

計時攻撃は、演算にかかる時間を調査して，保護されている内容についての情報を得る手法である。例えば，赤色画素を描く方が緑色画素より余計にかかる場合、要素の内容に一切アクセスすることなく，描画されている要素の大まかな画像を構築し直せるかもしれない。 A timing attack is a method of obtaining information about content that is otherwise protected, based on studying the amount of time it takes for an operation to occur. If, for example, red pixels took longer to draw than green pixels, one might be able to reconstruct a rough image of the element being rendered, without ever having access to the content of the element.

このモジュールに定義される様な CSS 能力は，サイト訪問者から内容を隠すためにも利用できるが、 Web 開発者は，これらの特能を［敏感な内容を利用者やページのスクリプトから隠す］ために利用するべきでない。内容は、 CSS を介して利用者への表示から隠されても，［ページのスクリプトやフォーム提出］からはアクセスでき，読み取れる。 Web 開発者は、この仕様における能力を — プライバシー境界を［課す／防御する］ものではなく — （すべての CSS 仕様と同じく）外見上の変更でしかないものとして扱うべきである。 While CSS capabilities like those defined in this module can be used to hide content from a site visitor, Web developers should not use these features to hide sensitive content from users or page scripts. Content that is hidden from a user’s display via CSS can still be accessed and read from page scripts or form submissions. Web developers should treat the capabilities in this spec (as with all CSS specs) as cosmetic changes only, and not imposing or defending a privacy boundary.

セキュリティの考慮点

<mask-source> ／ <clip-source> には、リソースの fetch 処理に対し特別な要件がある。 <mask-source>s and <clip-source>s have special requirements on fetching resources.

UA は、［ mask-image ／ mask-border-source ／ clip-path ］上のどの <url> に対しても， CORS も可能化され得る fetch [FETCH] を利用するものとする。 fetch するときは、［ "Anonymous" モードを利用する, リファラソースはスタイルシートの URL に設定する, 生成元は包含している文書の URL に設定する］ものとする†。この結果がネットワークエラーになる場合の効果は、値 none が指定されていたかのようになるとする。 User agents must use the potentially CORS-enabled fetch method defined by the [FETCH] specification for all <mask-source>, <clip-source> and <image> values on the mask-image, mask-border-source and clip-path properties.＼ When fetching, user agents must use “Anonymous” mode, set the referrer source to the stylesheet’s URL and set the origin to the URL of the containing document.＼ If this results in network errors, the effect is as if the value none had been specified.

【† これらのパラメタは、廃された W3C HTML 仕様に定義されていたアルゴリズムの記述に基づいており，どう適用するべきか意図不明になっている — 次を行うものと推定される：CORS になり得る要請を作成する( スタイルシートの URL , "image", 匿名 ) が、本当は， [CSS-VALUES-4] § URL 処理モデルに基づくよう定義し直されるべきであろう。】

付録 A. 非推奨にされた `clip` プロパティ

名前	`clip`
値	`<rect()>` \| `auto`
初期値	`auto`
適用対象	絶対的に位置された要素。 SVG においては、次に挙げるものに適用される：新たな表示域を確立する要素, `pattern` 要素, `mask` 要素 Absolutely positioned elements. In SVG, it applies to elements which establish a new viewport, pattern elements and mask elements.
継承	されない
百分率	受容しない
算出値	指定されたとおり
正準的順序	文法に従う
アニメーション型	算出値の型による

clip プロパティ [CSS21] は、この仕様により非推奨にされた。作者には、代わりに clip-path プロパティを利用することが奨励される。 UA は、 clip プロパティをサポートするものとする。 With this specification the clip property is deprecated. Authors are encouraged to use the clip-path property instead. UAs must support the clip property.

各種値の意味は： The clip property applies only to absolutely positioned elements. In SVG, it applies to elements which establish a new viewport, pattern elements and mask elements.（適用対象に挙げられているので訳は省略）＼ Values have the following meanings:

auto

要素は切り抜かれない。 The element does not clip.

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

［ <top> ／ <right> ／ <left> ／ <bottom> ］は、ボックスの［上端／左端／上端／左端］ボーダー辺から，切り抜き領域の［上端／右端／下端／左端］辺までのオフセットを指定する。 <top> and <bottom> specify offsets from the top border edge of the box, and <right>, and <left> specify offsets from the left border edge of the box.＼

作者は、各オフセットをカンマで分離するべきである。 UA は、カンマによる分離をサポートするものとする。また、カンマなしの（空白による）分離をサポートしてもよい（ただし，カンマとの組み合せは不可とする） — この仕様【 CSS 2 】の以前の改訂では、これに関して多義的であったので。 Authors should separate offset values with commas. User agents must support separation with commas, but may also support separation without commas (but not a combination), because a previous revision of this specification was ambiguous in this respect.

［ <top> ／ <right> ／ <bottom> ／ <left> ］は、 <length> 値または auto をとり得る。 <length> に対する負な値も許可される。値 auto は、切り抜き領域の対応する辺を，要素により生成されるボーダーボックスを成す辺と同じにすることを意味する — すなわち auto は：

<top> ／ <left> に対しては：0 と同じになる。
<bottom> に対しては：ボックスのボーダーボックスの使用縦幅と同じになる。
<right> に対しては：ボックスのボーダーボックスの使用横幅と同じになる。

<top>, <right>, <bottom>, and <left> may either have a <length> value or auto. Negative lengths are permitted.＼ The value auto means that a given edge of the clipping region will be the same as the edge of the element’s generated border box＼ (i.e., auto means the same as 0 for <top> and <left>, the same as the used value of the height plus the sum of vertical padding and border widths for <bottom>, and the same as the used value of the width plus the sum of the horizontal padding and border widths for <right>, such that four auto values result in the clipping region being the same as the element’s border box).

座標を画素単位に丸めるときは、次について配慮されるべきである：

次が満たされる場合、可視になる画素は無いようにすること：［ <left>, <right> の値は同じになる］∨［ <top>, <bottom> の値は同じになる］
次が満たされる場合、要素のボーダーボックス内の全画素が可視になるようにすること：<left>, <right>, <top>, <bottom> の値はどれも auto である

When coordinates are rounded to pixel coordinates, care should be taken that no pixels remain visible when <left> and <right> have the same value (or <top> and <bottom> have the same value), and conversely that no pixels within the element’s border box remain hidden when these values are auto.

clip プロパティは、 SVG 要素用の呈示属性である。 The clip property is a presentation attribute for SVG elements.

次の規則は： Example: The following two rules:

div {
  clip: rect(1em, 11em, 9em, 1em);
}

div のボーダー辺の外縁［横幅 × 縦幅］が［ 10em × 11em ］ならば、次の図に示される破線で囲まれた，矩形な切り抜き領域を作成することになる： and assuming both Ps are 50 by 55 pixel, will create, respectively, the rectangular clipping regions delimited by the dashed lines in the following illustrations:

矩形な切り抜き領域を伴うブロックボックスを示す図式。 This diagram illustrates two block boxes, one next to the other, with rectangular clipping regions of different dimensions. (See long description.)

上の例による切り抜きの適用を示す図（利用中の UA による呈示）
`clip` の適用前	切り抜き領域（黄色）	`clip` の適用後
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもらりるれろわをん	あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもらりるれろわをん	あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもらりるれろわをん

付録 B. ストローク限界ボックスを算出する

ストローク限界ボックスを算出するアルゴリズムは、 要素 の型に応じて，次に従う： The algorithm to compute the stroke bounding box is as follows, depending on the type of element:

［ use ／ image ］以外のグラフィックス要素 a graphics element without use or image

a 要素のうち，テキスト内容要素を伴うもの an a element with a text content element

ボックス :← 要素 のオブジェクト限界ボックスを成す矩形 Let box be a rectangle initialized to the object bounding box of element.
( stroke, width, linejoin, miterlimit, linecap ) :← 順に， 要素 の ( stroke, stroke-width, stroke-linejoin, stroke-miterlimit, stroke-linecap ) の使用値 ↓
IF［ stroke ＝ none ］∨［ width ＝ 0 ］：RETURN ボックス If the used value of stroke-width <= 0 or the used value of stroke is none return box.Let delta be the inflation value initialized to the half of the stroke-width.
係数 :← 1 ↓
IF［ 要素 は［ rect ／ ellipse ／ circle ／ image ］でない］： If element is not rect, ellipse, circle or image just follow one of the following conditions in the order they apply:
1. IF［ linejoin ＝ miter ］：係数 ← ［次が満たされるならば √2 ／他の場合は miterlimit ］：［ miterlimit < √2 ］∧［ linecap ＝ square ］ the used value for stroke-linejoin is miter • Let miter be the used value of stroke-miterlimit. • If miter is smaller than the square root of 2 and if the used value for stroke-linecap is square, multiply delta with the square root of 2. Otherwise, multiply delta with miter.
2. ELSE IF［ linecap ＝ square ］：係数 ← √2 the used value for stroke-linecap is square • Multiply delta with the square root of 2.
ボックス の各辺を ( 係数 × width ÷ 2 ) だけ外へ拡げる Inflate box with the value of delta.
RETURN ボックス Return box.

注記：［ stroke-opacity ／ stroke-dasharray ／ stroke-dashoffset ］は、ストローク限界ボックスの計算には影響しない。 Note: The values of the stroke-opacity, stroke-dasharray and stroke-dashoffset do not affect the calculation of the stroke bounding box.

コンテナ要素 a container element

use 要素 use

親 :← ［コンテナ要素ならばそれ／ use 要素ならばそれがホストしている shadow ツリーの根］ Let parent be the container element if it is one, or the root of the use element’s shadow tree otherwise.
RETURN ［ 親 の各( 子 子 ) に対し，次で与えられるボックス］すべてを包含する最小な矩形：子 のストローク限界ボックスを 子 の座標空間から 親 の座標空間に写像した結果 For each child child of parent • Invoke the stroke bounding box algorithm with child. • Let childBox be the returned box value of the invoked algorithm. • Map childBox from the coordinate space of child to the coordinate space of parent.Let box be the union of all childBoxes.Return box.

image 要素 image

RETURN 要素 のオブジェクト限界ボックス Return the object bounding box of element.

注記： SVG 仕様の将来バージョンは、この節を上書きし得る。 Note: A future version of the SVG specification may override this section.

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

インタフェース `SVGClipPathElement`

SVGClipPathElement インタフェースは、 clipPath 要素に対応する。 The SVGClipPathElement interface corresponds to the clipPath element.

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

clipPathUnits clipPathUnits, of type SVGAnimatedEnumeration, readonly: これ°の clipPathUnits 属性に対応する。 SVGUnitTypes にて定義される，いずれかの定数をとる。 Corresponds to attribute clipPathUnits on the given clipPath element. Takes one of the constants defined in SVGUnitTypes.
transform transform, of type SVGAnimatedTransformList, readonly: これ°の transform 呈示属性に対応する。 Corresponds to presentation attribute transform on the given element.

インタフェース `SVGMaskElement`

SVGMaskElement インタフェースは、 mask 要素に対応する。 The SVGMaskElement interface corresponds to the mask element.

[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;
};

maskUnits maskUnits, of type SVGAnimatedEnumeration, readonly: これ°の maskUnits 属性に対応する。 SVGUnitTypes にて定義される，いずれかの定数をとる。 Corresponds to attribute maskUnits on the given mask element. Takes one of the constants defined in SVGUnitTypes.
maskContentUnits maskContentUnits, of type SVGAnimatedEnumeration, readonly: これ°の maskContentUnits 属性に対応する。 SVGUnitTypes にて定義される，いずれかの定数をとる。 Corresponds to attribute maskContentUnits on the given mask element. Takes one of the constants defined in SVGUnitTypes.
x x, of type SVGAnimatedLength, readonly: これ°の x 属性に対応する。 Corresponds to attribute x on the given mask element.
y y, of type SVGAnimatedLength, readonly: これ°の y 属性に対応する。 Corresponds to attribute y on the given mask element.
width width, of type SVGAnimatedLength, readonly: これ°の width 属性に対応する。 Corresponds to attribute width on the given mask element.
height height, of type SVGAnimatedLength, readonly: これ°の height 属性に対応する。 Corresponds to attribute height on the given mask element.

最後の公表版からの変更点

【この節の内容は、未訳。】

謝辞

Thanks to Elika J. Etemad, Cameron McCormack, Liam R. E. Quin, Björn Höhrmann, Alan Stearns, Jarek Foksa, David Baron, Boris Zbarsky, Markus Stange and Sara Soueidan for their careful reviews, comments, and corrections. Special thanks to CJ Gammon for graphical assets.

要約

この文書の位置付け

1. 序論

1.1. 切り抜き

1.2. マスク法

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

3. 値

4. 各種用語

4.1. キーワードによる基準ボックス

5. 切り抜きパス

5.1. 切り抜き図形： clip-path プロパティ

6. SVG による切り抜きパスソース

6.1. clipPath 要素

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

7. マスク

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

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

7.3. マスク画像の敷き詰め法： mask-repeat プロパティ

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

7.5. マスク法区画： mask-clip プロパティ

7.6. 位置決め区画： mask-origin プロパティ

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

7.8. マスク層の組成法： mask-composite プロパティ

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

7.10. マスク画像描画モデル

7.10.1. マスクの処理法

7.10.2. 複数のマスク画像の多層化法

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

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

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

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

8.4. マスク法区画： mask-border-width プロパティ

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

8.6. マスクボーダー画像の敷き詰め法： mask-border-repeat プロパティ

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

8.8. マスクボーダー画像によるマスク法

9. SVG によるマスクソース

9.1. mask 要素

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

プライバシーの考慮点

セキュリティの考慮点

付録 A. 非推奨にされた clip プロパティ

付録 B. ストローク限界ボックスを算出する

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

インタフェース SVGClipPathElement

インタフェース SVGMaskElement

最後の公表版からの変更点

謝辞

適合性

参照文献

文献（規範）

文献（参考）

5.1. 切り抜き図形： `clip-path` プロパティ

6.1. `clipPath` 要素

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

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

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

7.3. マスク画像の敷き詰め法： `mask-repeat` プロパティ

7.4. マスク画像の位置決め： `mask-position` プロパティ

7.5. マスク法区画： `mask-clip` プロパティ

7.6. 位置決め区画： `mask-origin` プロパティ

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

7.8. マスク層の組成法： `mask-composite` プロパティ

7.9. マスク略式： `mask` プロパティ

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

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

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

8.4. マスク法区画： `mask-border-width` プロパティ

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

8.6. マスクボーダー画像の敷き詰め法： `mask-border-repeat` プロパティ

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

9.1. `mask` 要素

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

付録 A. 非推奨にされた `clip` プロパティ

インタフェース `SVGClipPathElement`

インタフェース `SVGMaskElement`