この仕様は、
視覚的な要素の部位を［
部分的／全部的
］に隠すための 2 つの手段
— ~maskingと切抜き —
を供する。
◎
CSS Masking provides two means for partially or fully hiding portions of visual elements: masking and clipping.
~maskingは、
別の~graphicな要素や画像を［
輝度~mask／~alpha~mask
］として利用する方法を述べる。
概して，~CSSや~SVGを介して要素を描画することは、
概念的には，［
要素を、
その子孫も含め，~bufferの中へ描いてから，その~bufferを要素の親の中に組成する
］かのように述べれる。
［
輝度~mask／~alpha~mask
］は、
組成ng段階の前に，この~bufferの透明度に波及する。
◎
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~graphics要素／基本~図形
］を利用することにより述べれる。
この領域の外側にあるものは描画されなくなる。
◎
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.
◎位置付け
これは、
編集者草案の公な複製です…
【以下、この節の内容は，~SOTD-CSSに移譲。】
1. 序論
◎非規範的
この仕様は、
2 種の~graphicな演算
— 切抜きと~masking —
を定義する。
両者とも，ある~objの部位を［
全部的／部分的
］に隠す。
◎
This specification defines two different graphical operations which both fully or partly hide portions of an object: clipping and masking.
1.1. 切抜き
いわゆる
`切抜き~path@
（ `clipping path^en ）は、
閉な［
~vector~path／図形／多角形
］で定義される。
切抜き~pathは、
それが成す領域の “内側にあるもの” すべては，~~透過できるようにする一方で，外側にあるものすべては “切取られて” ~canvas上に現れなくする（~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.
`clipping-path-1^dgm
~obj
`clipping-path-2^dgm
切抜き~path
`clipping-path-3^dgm
切抜かれた~obj
切抜き~path（ 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$p ~propは、
利用する切抜き~pathを［
基本~図形により，または
それを与える`~graphics要素$を伴う `clipPath$e 要素を参照して
］指定できる。
◎
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. ~masking
~graphicな~objに~maskを適用したときの効果は、
~objが~maskを通して背景に塗られたかのようになる
— その結果，~objの各部は、［
完全／部分的
］に~maskにより除かれる。
◎
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.
`luminance-mask-1^dgm
~obj
`luminance-mask-2^dgm
輝度~mask
`luminance-mask-3^dgm
~maskされた~obj
輝度~mask（ 2 個目の図）は、
単~色で埋められた図形（ 1 個目の図）に適用されている。
この結果は、
~maskされた図形（ 3 個目の図）になる。
◎
A luminance mask (middle) is applied on a shape filled with a gradient (left). This results in a masked shape (right).
~maskは、［
`mask-image$p ／ `mask-border-source$p
］~propを利用して適用される。
◎
Masks are applied using the mask-image or mask-border-source properties.
`mask-image$p ~propは：
◎
↓
`mask$e 要素を参照できる
— その場合、
`mask$e 要素の内容が~maskとして~serveする。
◎
The mask-image property may reference a mask element. The content of the mask element serves as the mask.
あるいは、
~maskとして利用する画像を直に指すこともできる
— 多くの単純な利用~用に，明示的な `mask$e 要素の必要なしに。
この~maskは
— ~CSS背景~画像と同じ様に —
`mask-position$p, `mask-size$p, その他の特徴付け~propを利用して，~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$p ~propは、
~maskを 9 片に分割する。
各~片は、
`~mask~border画像~区画$の~sizeに収まるように，様々な仕方で［
切分けられ, 拡縮され, 伸張され
］得る。
`mask-border$p ~propは、
各種 `mask-border-*^p ~prop用の略式~propとして~serveする。
◎
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$p ~propは、［
`mask-border$p, `mask-image$p
］に提携するすべての~prop用の，略式~propとして~serveする。
◎
The mask property serves as a shorthand property for all mask-border and mask-image affiliated properties.
注記：
~maskingは、
一般に，内容の “可視な部位” に対する制御をより多く供して，高度な~graphicな効果~用に より多くの可能性を与えるが、
切抜き~pathの方が処理能は高く，基本~図形の方が容易に補間できる。
◎
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. ~module間の相互作用
この仕様は、
一群の~CSS~propを定義する。
それらは、
それらが適用される要素の視覚的な描画に影響する。
これらの効果は、［
`CSS21$r
`§ 視覚-整形~model＠~CSS2J#visuren$
に則って，要素が~sizeされ, 位置された後
］に適用される。
これらの~propがとる一部の値は、
`積層~文脈$を作成させる。
加えて，この仕様は、
`CSS21$r による
§ 切抜き： `clip^p ~prop
を置換する。
◎
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].
◎
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$r に定義される ~Porter-Duff 組成ng演算子による，複数の~mask層の組成ngを許容する。
◎
This specification allows compositing multiple mask layers with the Porter Duff compositing operators defined in CSS Compositing and Blending [COMPOSITING-1].
用語 `~obj限界~box$は、
`SVG11$r における定義に従うとする。
◎
The term object bounding box follows the definition in SVG 1.1 [SVG11].
`basic-shape$t 【！基本~図形】は `CSS-SHAPES$r にて定義される。
◎
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~propと値の定義は、
`CSS3BG$r における定義に相似的である。
冗長さを避けるため、
この仕様は
`CSS3BG$r の記述と定義に依拠する。
`CSS3BG$r における次の用語は、
この仕様においては，次の意味を持つ：
◎
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:
◎
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
切抜き~pathは、
塗りを適用できる領域を制約する
— 制約された領域は、
`切抜き領域@
と呼ばれる。
概念的には、
この領域の外側にある，絵図を成すどの部分も描かれない。
これには、［
切抜き~pathが適用される要素と，その子孫たち
］を成すどの［
内容, 背景, ~border, ~text装飾, 外形線, 可視な~scroll用の仕組み
］も含まれる。
◎
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$p ／ `clip-path$p
］~propを介して, および
自身の `overflow$p ~propは `visible^v かどうかにより）。
描画されるものは、
それらが成す累積的な交差域に制約される。
◎
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の文書~UIwindowが成す限界域を超過する場合、
内容は，~OS環境により，その~UIwindowに切抜かれ得る。
◎
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.
切抜き~pathは、
要素の描画に影響する。
それは、
要素の内来的な幾何には影響しない。
切抜かれた要素（すなわち， `clip-path$p ~propを介して `clipPath$e 要素を参照する要素や その子）の幾何は、
切抜かれなかったかのように同じであり続けるモノトスル。
◎
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$e ）を考える
— 図形は、
先祖に適用された切抜き~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$e 要素により参照されているとする：
◎
The shape is referenced by a use element:
<use xlink:href="#shape"/>
この図形が成す幾何に，真円な（ `circle$f ）切抜き~pathが波及することはない。
◎
The geometry of the shape is not influenced by the circular clipping path.
既定では、
図形の切取られた（可視でない）領域に対しては，
`pointer-events$p 【~propによりアリな~event】を配送しないモノトスル。
例えば，要素が ある図形で切抜かれている場合、
`切抜き領域$を成す図形の外側では `click^et ~eventを受取らないことになる。
◎
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^p ~prop
◎名 `clip-path@p
◎値 `clip-source$t | [ `basic-shape$t || `geometry-box$t ] | `none^v
◎初 `none^v
◎適
すべての要素。
~SVGにおいては、［
`defs$e 要素~以外の`容器~要素$／`~graphics要素$／ `use$e 要素
］。
◎
All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
◎継 されない
◎百 受容しない
◎算
`url$t は絶対~化される／
他は指定されたとおり
◎
as specified, but with <url> values made absolute
◎順 文法に従う
◎ア 算出d値の型による
【 `basic-shape$t については、`基本~図形の補間＠~CSSSHAPES#basic-shape-interpolation$も見よ。】
◎表終
基本~図形を指定するか, または `clipPath$e 要素を参照して，`切抜き~path$を作成する。
◎
Specifies a basic shape or references a clipPath element to create a clipping path.
`切抜き~path$を `CSS-SHAPES$r に定義される基本~図形~関数として与える。
基本~図形を~sizeして位置するために用立てる基準~boxは、
`geometry-box$t が指定されて［
いれば その`~keywordによる基準~box$ ／
いなければ `border-box$v 【に対する使用~値の】`~keywordによる基準~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.
◎
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^v
`切抜き~path$は作成されない。
◎
No clipping path gets created.
`geometry-box$t 値に対する`使用~値$は：
◎
↓
~CSS~layout~boxが結付けられていない~SVG要素においては
⇒
［
`content-box$v ／ `padding-box$v
］に対しては `fill-box$v になり、［
`border-box$v ／ `margin-box$v
］に対しては `stroke-box$v になる。
◎
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~layout~boxが結付けられた要素においては
⇒
`fill-box$v に対しては `content-box$v になり，［
`stroke-box$v ／ `view-box$v
］対しては `border-box$v になる。
◎
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.
算出d値が `none^v 以外になる場合
— `opacity$p の値が 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参照が妥当でない場合（例：
存在しない~objを指している ／ ~objは `clipPath$e 要素でない）,
適用され切抜きは無い。
◎
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$f の切抜き~pathとしての利用をデモる。
各［
~spaceで分離された長さ~pair
］は、
多角形の ある頂点を表現する。
`§ 序論＠#clipping$にて可視化された切抜き~pathを見れる。
◎
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$p ~propは
ある~SVG `clipPath$e 要素を参照する。
各［
~commaで分離された長さ~pair
］は、
多角形のある頂点を表現する。
前の例のときと同じく，`序論＠#clipping$にて可視化された 切抜き~pathを見れる。
◎
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.
`clipPath$e 要素の内容~用の`利用元~座標系$を定義する。
`clip-path$p ~propを介してこの要素を参照している要素（すなわち，この要素が定義する切抜き~pathが適用される要素）を %E で表すとき、
この座標系は，指定された値に応じて 次で与えられる：
◎
Defines the coordinate system for the contents of the clipPath.
`userSpaceOnUse@vCPU
%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@vCPU
座標［
(0, 0) ／ (1, 1)
］が %E の`限界~box$の［
左上~隅 ／ 右下~隅
］に写像されるように確立される。
その`利用元~単位$と~CSS `px$u 単位は等価になる。
◎
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$a 属性が指定されていない場合の効果は、
値 `userSpaceOnUse$vCPU が指定されていたかのようになる。
◎
If attribute clipPathUnits is not specified, then the effect is as if a value of userSpaceOnUse were specified.
~animate可能。
◎
Animatable: yes.
`clipPath$e 要素は、
先祖から~CSS~propを継承するが，それを参照している要素からは継承しない。
◎
CSS properties inherit into the clipPath element from its ancestors; properties do not inherit from the element referencing the clipPath element.
`clipPath$e 要素は、
直に描画されることは決してない。
その用途は、
`clip-path$p ~propを利用して参照する他にない。
`display$p ~propは `clipPath$e 要素には適用されないので、［
`clipPath$e 要素, および その先祖
］の `display$p ~propの値が何であれ、
`clipPath$e 要素は，直に描画されることはなく, また参照~用に可用になる。
◎
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$e 要素は［
`path$e ／ `text$e ／ `基本~図形$（ `circle$e など） ／ `use$e
］要素を包含し得る。
`use$e 要素は、
`clipPath$e 要素の子であるならば［
`path$e 要素 ／ `text$e 要素 ／ `基本~図形$
］要素を直に参照していなければナラナイ。
間接的な参照は、
~errorであり，当の `clipPath$e 要素を無視するモノトスル。
◎
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 は、
内容~modelに違反している `clipPath$e を参照している要素の描画を不能化する。
どの~browserも，間接的な参照を伴う `clipPath$e の利用を無視していない。
（`17$issue）
◎
Firefox disables rendering of elements referencing clipPaths with violated content model. No browser ignores clipPath on use with indirect reference. [Issue #17]
◎
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~propについて定義する。
とりわけ~text上の。
（`170$issue）
◎
Define raw geometry with regards to CSS properties that affect it. Especially on text. [Issue #170]
所与の`~graphics要素$用に実際に利用される切抜き~pathは、［
要素の `clip-path$p ~propに指定された切抜き~path
］と［
新たな表示域を確立している［
要素の先祖
］たちの `clip-path$p ~propに指定された切抜き~path
］との交差域になる（ `SVG11$r を見よ）。
◎
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$e 要素の先祖の切抜き~pathが，
`clipPath$e 要素やその子~要素に継承されることはない。
◎
The clipPath element itself and its child elements do not inherit clipping paths from the ancestors of the clipPath element.
◎
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.
切抜き~pathが空な場合【内容が空な `clipPath$e 要素など】、
`clip-path$p ~propが適用される要素は完全に切抜かれて~~消えることになる。
◎
An empty clipping path will completely clip away the element that had the clip-path property applied.
`clip-rule$p ~propは、［
所与の地点が［
`~graphics要素$で作成される`切抜き領域$用の図形
］の内側にあるかどうかを決定する
］ときに利用されることになる~algoを指示する。
~algoと 各種 `clip-rule$p 値の定義は、
`fill-rule$p ~propの定義に従う。
`SVG2$r `§ 各種~fill~prop＠~SVGpainting#FillProperties$
【！`SVG11$r ~SVG11/painting.html#FillProperties】
を見よ。
◎
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@v
`fill-rule$p ~propの記述を見よ。
【！`SVG11$r】
◎
See description of fill-rule property [SVG11].
`evenodd@v
`fill-rule$p ~propの記述を見よ。
【！`SVG11$r】
◎
See description of fill-rule property [SVG11].
`clip-rule$p ~propは、
`clipPath$e 要素の中に包含されている`~graphics要素$のみに適用される。
◎
The clip-rule property only applies to graphics elements that are contained within a clipPath element.
注記：
`clip-rule$p ~propは
`basic-shape$t には適用されない。
◎
Note: The clip-rule property does not apply to <basic-shape>s.
`nonzero$v 規則を示す絵図：
◎
The following drawing illustrates the nonzero rule:
3 個の図形がある：
自身に~~交差する一筆の線で描かれた，5 個の頂点からなる星形（図左） ／
同じ図形の下位pathに属する, 時計回りに描かれた大小 2 個の真円（図中） ／
同じ図形の下位pathに属する, 時計回りに描かれた大きい真円と反時計回りに描かれた小さい真円（図右）。
最後の図形にのみ “穴” がある。
◎
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$v 規則を示す絵図:
◎
The following drawing illustrates the evenodd 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".
次の~code片は、
切抜き~pathに `even-odd^en 切抜き規則を適用することになる
— 切抜き図形を定義する `path$e 要素には `clip-rule$p が指定されているので：
◎
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:
一方で，次の~code片では、
`even-odd^en 切抜き規則は適用されないことになる
— `clip-rule$p は、
切抜き図形を定義している~objではなく，それを参照している要素~上に指定されているので：
◎
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:
`clip-rule$p
~propは、
~SVG要素~用の`呈示~属性$である。
◎
The clip-rule property is a presentation attribute for SVG elements.
7. ~mask
7.1. ~mask画像~source： `mask-image^p ~prop
◎名 `mask-image@p
◎値 `mask-reference$t#
◎初 `none^v
◎適
すべての要素。
~SVGにおいては、［
`defs$e 要素~以外の`容器~要素$／`~graphics要素$／ `use$e 要素
］。
◎
All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
◎継 されない
◎百 受容しない
◎算
~keyword `none^v ／
`image$t の算出d値／
`url$t の算出d値
◎
the keyword none, a computed <image>, or a computed <url>
◎順 文法に従う
◎ア 離散的
◎表終
この~propは、
要素の
`~mask層~画像@
を設定する。
◎
This property sets the mask layer image of an element. Where:
［
`mask$e 要素／~CSS画像
］†への~URL参照（例えば `url(commonmasks.svg#mask)^v ）。
【†どちらになるかは、`多義的な画像~URL$を見よ。】
◎
A URL reference to a mask element (for example url(commonmasks.svg#mask)) or to a CSS image.
`none^v
透明な黒の画像~層として数えられるようになる。
◎
A value of none counts as a transparent black image layer.
算出d値が `none^v 以外になる場合
— `opacity$p の値が 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.
次に該当する~mask参照であっても、
透明な黒の画像~層として数えられる
⇒＃
空~画像である（横幅または縦幅が 0 ）／
~downloadに失敗した ／
`mask$e 要素への参照でない／
存在しない ／
表示できない（例：~supportされる画像~形式でない）
◎
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.
`~mask層~画像$を処理する方法については、
`~maskの処理-法$secを見よ。
◎
See the section “Mask processing” for how to process a mask layer image.
注記：
`mask-reference$t が成す~list内の値 `none^v は、
`mask-composite$p に指定される 利用される組成ng演算子に依存して，~masking演算に波及し得る。
◎
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$t は、
~mask層として数えられ、
繰返可能な `mask-reference$t ~list内で
`image$t や更なる `mask-source$t ~list~itemと組合できる。
◎
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$p でも~maskできる。
その~propと `mask-image$p との相互作用については、
`mask-border-source$p を見よ。
◎
Note: An element can also be masked with mask-border-source. See mask-border-source for the interaction of that property with mask-image.
~mask参照の例：
◎
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$p 値を成す~commaで分離された値たちが，どの~mask層に寄与するかについては、
`複数の~mask画像の多層化法$secを見よ。
◎
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画像の解釈： `mask-mode^p ~prop
◎名 `mask-mode@p
◎値 `masking-mode$t#
◎初 `match-source$v
◎適 `mask-image$p と同じ
◎
All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
◎継 されない
◎百 受容しない
◎算 指定されたとおり
◎順 文法に従う
◎ア 離散的
◎表終
`mask-mode$p ~propは、
`mask-reference$t を［
輝度~mask, ~alpha~mask
］のどちらに扱うかを指示する（`~maskの処理-法$secを見よ）。
◎
The mask-mode property indicates whether the <mask-reference> is treated as luminance mask or alpha mask. (See Mask processing.)
`~mask層~画像$の~alpha値が~mask値として利用されるべきであることを指示する。
`~mask値の計算-法$secを見よ。
◎
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@v
`~mask層~画像$の輝度~値が~mask値として利用されるべきであることを指示する。
`~mask値の計算-法$secを見よ。
◎
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.
◎
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$p ~propは， `mask$e 要素~用の~mask型~値を `alpha$v1 に設定する。
`mask-image$p ~propは，この `mask$e 要素を参照していて、
`mask-mode$p ~propの値は `luminance$v1 にされている。
`mask-mode$p ~propは、
`mask-type$p を `luminance$v1 にしている定義を上書きすることになる。
◎
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$p ~propは、
`mask-border-source$p の~masking~modeには影響しないモノトスル。
◎
The mask-mode property must not affect the masking mode of mask-border-source.
`mask-mode$p 値を成す~commaで分離された値たちが，どの~mask層に寄与するかについては、
`複数の~mask画像の多層化法$secを見よ。
◎
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画像の敷詰法： `mask-repeat^p ~prop
◎名 `mask-repeat@p
◎値 `repeat-style$t#
◎初 `repeat^v
◎適 `mask-image$p と同じ
◎
All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
◎継 されない
◎百 受容しない
◎算 `background-repeat$p と同じ
◎
Consists of: two keywords, one per dimension
◎順 文法に従う
◎ア 離散的
◎表終
各`~mask層~画像$が
`~sizeされ＠#the-mask-size$,
`位置された＠#the-mask-position$
後に敷詰められる方法を指定する。
◎
Specifies how mask layer images are tiled after they have been sized and positioned.
値の定義については、
`background-repeat$p ~propを見よ。
`CSS3BG$r
◎
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;
}
`space^v による効果：
~dotを成す`~mask層~画像$は、
等間隔に置かれつつ，`~mask塗ng区画$ 全体を覆うように敷詰められる。
◎
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$p 値を成す~commaで分離された値たちが，どの~mask層に寄与するかについては、
`複数の~mask画像の多層化法$secを見よ。
◎
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画像の位置決め： `mask-position^p ~prop
◎名 `mask-position@p
◎値 `position$t#
◎初 `0% 0%^v
◎適 `mask-image$p と同じ
◎
All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
◎継 されない
◎百
［
`~mask塗ng区画$の~size ~MINUS `~mask層~画像$の~size
］を基準にする。
`background-position$p の~textを見よ。
`CSS3BG$r
◎
refer to size of mask painting area minus size of mask layer image; see text background-position [CSS3BG]
◎算
原点を表現している 2 個の~keywordと, その原点からの 2 個の~offsetからなる
— 各~offsetは、［
`length$t として与えられた場合は絶対~長さ／
他の場合は百分率
］として与えられる。
◎
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.
◎順 文法に従う
◎ア 繰返可能な~list
◎表終
各種 値の定義については、
`background-position$p ~propを見よ。
`CSS3BG$r。
◎
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;
}
~mask位置は、
左上~隅~以外の隅から相対的にもなれる。
例えば次のものは、
背景~画像を下端から 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$p 値を成す~commaで分離された値たちが，どの~mask層に寄与するかについては、
`複数の~mask画像の多層化法$secを見よ。
◎
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. ~masking区画： `mask-clip^p ~prop
◎名 `mask-clip@p
◎値 [ `coord-box$t | `no-clip^v ]#
◎初 `border-box^v
◎適 `mask-image$p と同じ
◎
All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
◎継 されない
◎百 受容しない
◎算 指定されたとおり
◎順 文法に従う
◎ア 離散的
◎表終
`mask-clip$p は、
`mask$e 要素を参照しない`~mask層~画像$用の
`~mask塗ng区画@
を決定する
— それは、
~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$p ~propは、
`mask$e 要素を参照する`~mask層~画像$には 影響しない。
そのような~mask参照~用の`~mask塗ng区画$は、
`mask$e 要素の［
`x$a, `y$a, `width$a, `height$a, `maskUnits$a
］属性により決定される。
◎
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$t
塗られる内容は、
指定された`~keywordによる基準~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@v
塗られる内容は、
制約されない（切抜かれない）。
◎
The painted content is not restricted (not clipped).
`coord-box$t 値に対する`使用~値$は：
◎
↓
~CSS~layout~boxが結付けられていない~SVG要素においては
⇒
［
`content-box$v ／ `padding-box$v
］に対しては `fill-box$v になり，
`border-box$v に対しては `stroke-box$v になる。
◎
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~layout~boxが結付けられた要素においては
⇒
`fill-box$v に対しては `content-box$v になり，［
`stroke-box$v ／ `view-box$v
］に対しては `border-box$v になる。
◎
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$p 値を成す~commaで分離された値たちが，どの~mask層に寄与するかについては、
`複数の~mask画像の多層化法$secを見よ。
◎
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^p ~prop
◎名 `mask-origin@p
◎値 `coord-box$t#
◎初 `border-box^v
◎適 `mask-image$p と同じ
◎
All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
◎継 されない
◎百 受容しない
◎算 指定されたとおり
◎順 文法に従う
◎ア 離散的
◎表終
単独の~boxとして描画される要素に対しては、
`~mask位置決め区画@
を指定する。
複数個の~boxとして描画される要素（例：何~行lかにわたる行内~box, 何~pageかにわたる~box）に対し，どの~boxに演算して ~mask位置決め区画を決定するかは、
`box-decoration-break$p により指定される。
◎
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$t
位置は、
指定された`~keywordによる基準~box$に相対的になる。
（
【！単独の~boxに対しては、＊？】
`0 0^v は ~boxの左上~隅, `100% 100%^v は右下~隅になる。）
◎
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$t 値に対する`使用~値$†は：
◎
↓
~CSS~layout~boxが結付けられていない~SVG要素においては
⇒
［
`content-box$v ／ `padding-box$v ／ `border-box$v
］に対しては、
`fill-box$v になる。
◎
For SVG elements without associated CSS layout box, the values content-box, padding-box and border-box compute to fill-box.
~CSS~layout~boxが結付けられた要素においては
⇒
［
`fill-box$v ／ `stroke-box$v ／ `view-box$v
］に対しては、
初期~値と同じ `border-box$v になる。
◎
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$p ~propは、
`background-origin$p ~prop `CSS3BG$r に類似するが，［
それがとり得る値たちが成す集合 ／ その初期~値
］は異なる。
◎
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$p は `padding-box$v,
`mask-origin$p は `border-box$v,
`mask-position$p は `top left^v （初期~値）
にされていて，要素の~borderは 0 でない場合、
`~mask層~画像$の上端と左端は切取られることになる。
◎
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$p 値を成す~commaで分離された値たちが，どの~mask層に寄与するかについては、
`複数の~mask画像の多層化法$secを見よ。
◎
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画像の~sizing： `mask-size^p ~prop
◎名 `mask-size@p
◎値 `bg-size$t#
◎初 `auto^v
◎適 `mask-image$p と同じ
◎
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
◎順 文法に従う
◎ア 繰返可能な~list
◎表終
`~mask層~画像$の~sizeを指定する。
◎
Specifies the size of the mask layer images.
各種 値の定義については、
`background-size$p ~propを見よ。
`CSS3BG$r。
◎
See background-size property [CSS3BG] for the definitions of the property values.
`mask-size$p 値を成す~commaで分離された値たちが，どの~mask層に寄与するかについては、
`複数の~mask画像の多層化法$secを見よ。
◎
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層の組成-法： `mask-composite^p ~prop
◎名 `mask-composite@p
◎値 `compositing-operator$t#
◎初 `add^v
◎適
すべての要素。
~SVGにおいては、［
`defs$e 要素~以外の`容器~要素$／`~graphics要素$
］に適用される。
◎
All elements. In SVG, it applies to container elements without the defs element and all graphics elements
◎継 されない
◎百 受容しない
◎算 指定されたとおり
◎順 文法に従う
◎ア 離散的
◎表終
各~keywordは、
ある~Porter-Duff組成ng演算子 `COMPOSITING-1$r を表現する
— それは、［
現在の~mask層とその下にある（奥にある）~mask層たち
］を組成するときに利用される組成ng演算を定義する。
◎
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.
以下においては、
`~source@
は 現在の~mask層を指し，
`~dest@
は ~sourceの下にある すべての~mask層の~~累積
— すなわち，それぞれに対応する組成ng演算子を順に適用した結果 —
を指すとする。
◎
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@v
`~source$は、
`~dest$の上に配置される（~Porter-Duff組成ng演算子 `source-over$v を見よ）。
◎
The source is placed over the destination. (See Porter-Duff compositing operator source over for more details.)
`subtract@v
`~source$は、
`~dest$の外側に入る所に配置される（~Porter-Duff組成ng演算子 `source-out$v を見よ）。
◎
The source is placed, where it falls outside of the destination. (See Porter-Duff compositing operator source out for more details.)
`intersect@v
`~source$は、
`~dest$に重合する部分を置換する
（~Porter-Duff組成ng演算子 `source-in$v を見よ）。
◎
The parts of source that overlap the destination, replace the destination. (See Porter-Duff compositing operator source in .)
`exclude@v
`~source$と`~dest$とが重合しない領域が組合される。
（~Porter-Duff組成ng演算子 `xor$v を見よ）。
◎
The non-overlapping regions of source and destination are combined. (See Porter-Duff compositing operator XOR.)
更なる~mask層が無い場合†、
組成ng演算子は無視するモノトスル。
~mask層は、
要素の内容や要素の背後にある内容とは組成しないモノトスル
— それらは隔離された~groupの中に描画されたかのように動作するモノトスル。
◎
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.
現在の~mask層より下にあるすべての~mask層は、
現在の~mask層に対し組成ng演算を適用する前に組成するモノトスル。
◎
All mask layers below the current mask layer must be composited before applying the compositing operation for the current mask layer.
以下の例では、
次の 2 つの`~mask層~画像$
`rect.svg^c, `circle.svg^c
が利用される
【図の黒は、~mask値 1 を表す】：
◎
This example uses two mask layer images: circle.svg and rect.svg.
`mask-source-destination-1^dgm
`mask-source-destination-2^dgm
【！＊alt="Example of source-over compositing of mask layers"（他も同じ）】
両`~mask層~画像$とも， `mask-image$p ~propから参照される：
◎
Both mask layer images are references with the mask-image property:
mask-image: circle.svg, rect.svg;
~mask層 `rect.svg^c は、
~mask層 `circle.svg^c より下に（利用者から見て奥に）ある。
◎
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$p ~propにより、
作者は異なる仕方を選んで複数の~mask層を組合できる。
◎
With the property mask-composite the author may choose different ways to combine multiple mask layers.
`add$v は `rect.svg^c の上に `circle.svg^c を塗るようにする。
その挙動は、
組成ng演算子 `source-over$v により述べられる。
◎
add paints the circle.svg on top of rect.svg. The behavior is described by the compositing operator source over.
mask-composite: add;
`mask-composite-add^dgm
`subtract$v は、
`circle.svg^c の［
`rect.svg^c に重合しない部位
］だけを塗るようにする。
その挙動は、
組成ng演算子 `source-out$v により述べられる。
◎
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;
`mask-composite-subtract^dgm
`intersect$v は、
`circle.svg^c と `rect.svg^c が重合する部位を塗るようにする。
その挙動は、
組成ng演算子 `source-in$v により述べられる。
◎
intersect paints portions of circle.svg that overlap rect.svg. The behavior is described by the compositing operator source in.
mask-composite: intersect;
`mask-composite-intersect^dgm
`exclude$v は、
`circle.svg^c と `rect.svg^c が重合しない部位を塗るようにする。
その挙動は、
組成ng演算子 `xor$v により述べられる。
◎
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;
`mask-composite-exclude^dgm
次の例は、
2 個の~mask層と 2 個の組成ng演算子を指定する。
◎
The following example specifies two mask layers and two compositing operators.
`rect.svg^c, `circle.svg^c は、
`add$v 組成ng演算子を用立てる。
`exclude$v を利用する~mask層はもう無いので， `exclude$v は無視される。
◎
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.
異なる組成ng演算子を伴う 3 個の ~mask層の例：
◎
This is an example of 3 mask layers with different compositing operators.
まず，
`rect.svg^c に `circle.svg^c が “加算される”。
次に， `trapeze.svg^c （左図）の部位のうち［
最初の 2 層を組成した結果とが重合しない部位
］のみを可視にする。
【この記述と，その結果を示す右図とが整合していない（ `subtract^v が `intersect^v であったなら整合するが）。】
◎
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$p 値を成す~commaで分離された値たちが，どの~mask層に寄与するかについては、
`複数の~mask画像の多層化法$secを見よ。
◎
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^p ~prop
◎名 `mask@p
◎値 `mask-layer$t#
◎初 個々の~propを見よ
◎適 `mask-image$p と同じ
◎
All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
◎継 されない
◎百 個々の~propを見よ
◎算 個々の~propを見よ
◎順 文法に従う
◎ア 個々の~propを見よ
◎表終
◎
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$t が `mask$e 要素を参照する場合、［
`mask-repeat$p ／
`mask-position$p ／
`mask-clip$p ／
`mask-origin$p ／
`mask-size$p
］の~propの`使用~値$による効果は生じさせないモノトスル。
この事例では、
`mask^e 要素が`~mask層~画像$の［
位置, ~sizing, 切抜き
］を定義する。
◎
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$p 略式は、
`mask-border$p も その初期~値に設定し直す
【したがって、その下位propたちも初期~値に設定し直す】
。
したがって作者には、［
~cascade内で先に~~現れる~mask設定群を上書きする
］ときには
— 他の略式や個々の~propよりも —
`mask$p 略式を利用することが推奨される。
そうすれば、［
新たな~styleの効果が生じるよう， `mask-border$p を設定し直す
］ことも確保されるので。
◎
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. ~mask画像~描画~model
~CSS~box~modelで整形される要素に対する
`none^v 以外の値を伴う `mask-image$p ~propの適用は、
`opacity$p の値が 1 未満のときと同じ仕方で，`積層~文脈$を確立する。
したがって，要素のすべての子孫は、
~group一体として~maskingが適用された上で，~groupとして一緒に描画される。
◎
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$p ~propには、
どの要素の~CSS~boxに対しても，その幾何や接触判定に対する効果は無い。
◎
The mask-image property has no effect on the geometry or hit-testing of any element’s CSS boxes.
`mask$p ~propは、
~SVG要素~用の`呈示~属性$である。
◎
The mask property is a presentation attribute for SVG elements.
7.10.1. ~maskの処理-法
以下における
`~mask画像@
は、［
`~mask層~画像$／`~mask~border画像$
］の総称を表す。
◎
In the following section, mask image refers either to a mask layer image or to a mask border image.
~mask画像は、
~mask値を計算するときには，次の 2 種いずれかの手法を利用して解釈される
— その結果が、
~maskされる~objの~alpha値に乗算されることになる。
◎
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.
（単純に）`~mask画像$の~alpha~channelを利用する：
◎
The first and simplest method of calculating the mask values is to use the alpha channel of the mask image.＼
この手法では、
所与の地点における~mask値は，単純に その地点における~alpha~channelの値になる。
色~channelは、
~mask値に寄与しない。
◎
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.
`~mask画像$の輝度を利用する：
◎
The second method of calculating the mask values is to use the luminance of the mask image.＼
この手法では、
所与の地点における~mask値は，画像を成す各~画素の色~channel値と~alpha~channel値から 次の手続-を利用して算出される：
◎
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.
色~channel値から輝度~値を算出する：
◎
Compute a luminance value from the color channel values.
`mask$e 要素の `color-interpolation$p の算出d値は `linearRGB$v の場合、
元の画像の（~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.
乗算済みでない~RGB色~値に［
輝度を~alphaに換算する係数
］を適用して，輝度~値に変換する
（ `feColorMatrix$e 要素【！`SVG11$r】
【の `type^a 属性~用の値 `luminanceToAlpha^v 】
に定義されるとおり。）
◎
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.
算出された輝度~値に画素の~alpha値を乗算して，~mask値を生産する。
◎
Multiply the computed luminance value by the corresponding alpha value to produce the mask value.
利用される手法を問わず、
~mask値を計算する手続-では，~maskを成す【元の~mask画像の】内容は 4 ~channel~RGBA~graphics~objであるものと見做される。
他の型の~graphics~objに対しては、
特別な取扱いが要求される：
◎
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 ~channel~RGB~graphics~objが利用されている場合（例： 3 ~channel画像~fileを参照しているとき）の効果は、［
~objは，~alpha~channelが一様に 1 に設定された， 4 ~channel~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.
単~channel画像が利用されている場合（例：単~channel~grayscale画像~fileを参照しているとき）の効果は、
その~channelが~RGB各~色~channelを与えているものとみなす下で，前項を適用する。
◎
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.
注記：
~grayscale画像~fileを参照しているときに，色~channelを算出するときには、［
符号化された~grayscale値と線型明度~値を関係付ける伝達曲線†
］も，織り込むモノトスル。
【†おそらく，`srgb＠~CSSCOLOR#valdef-color-srgb$v に定義されるそれを指す。】
◎
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 `~graphics要素$（例： `circle$e や `text$e ）は、
~masking演算の目的においては，どれも 4 ~channel~RGBA画像として扱われる。
◎
Note: SVG graphics elements (e.g., circle or text) are all treated as four-channel RGBA images for the purposes of masking operations.
~maskの効果は、［
~maskが無い代わりに、
所与の~objの~alpha~channelは，結果の~mask値で乗算された
］とするときに起こる結果に一致する。
◎
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.
`~mask画像$により覆われない領域は、
透明な黒として扱われる。
そこでの~mask値 は 0 になる。
◎
Regions not covered by a mask image are treated as transparent black. The mask value is 0.
注記：
`mask-repeat$p により~maskの`~mask画像$が繰返される場合、
各 画像は~~間隔を~~空けて敷詰められることもある。
そのような合間の空間は、
透明な黒の~maskとして扱われる。
◎
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画像の多層化法
~boxの~maskは、
複数の層からなり得る。
層の枚数は、
`mask-image$p ~prop用の~commaで分離された値の個数により決定される。
`mask-reference$t ~list内の値が `none^v であっても，依然として層を作成する。
`§ 複数の背景~画像の多層化法＠~CSSBG#layering$
`CSS3BG$r を見よ。
◎
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$p, `mask-composite$p
については， `CSS3BG$r には相応するものは無いが、
相応するものがある~mask~propに対するときと同じ様に，各~層に対応~付けられる~commaで分離された値~listを与える
— 値~listを成す値の個数が層~数に一致しない場合の取扱いも含め。
【！層~数を超える場合、尾部にある余剰な値たちは利用されない。】
【！層~数に満たない場合、~UAは，十分な個数が得られるまで~listを繰返して使用~値を計算するモノトスル。】
◎
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層~画像$は、
（必要yなら）~alpha~maskに変形されてから
（`~maskの処理-法$secを見よ），
`mask-composite$p により指定された組成ng演算子も織り込んで組成することにより，組合される。
◎
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. ~border~boxの~mask
`mask-border$p により，画像を［
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.
`~mask~border画像$を成す各~片。
◎
Pieces of a mask border image.
これらの各~片は、
`~mask~border画像~区画$の~sizeに収まるように，様々な仕方で［
切分けられ, 拡縮され, 伸張され
］得る。
このように歪められた画像が，~maskとして利用される。
`mask-border$p の構文は、
`CSS3BG$r の `border-image$p ~propに対応する。
◎
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].
次の例における`~mask~border画像$（図中央）は、［
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.
`mask-border$p 用の例。
図の左から順に：
~maskされる~obj, ~alpha~mask, ~maskした結果の~obj。
◎
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.
◎名 `mask-border-source@p
◎値 `none^v | `image$t
◎初 `none^v
◎適 `mask-image$p と同じ
◎
All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
◎継 されない
◎百 受容しない
◎算
~keyword `none^v ／
`image$t の算出d値
◎
they keyword none or the computed <image>
◎順 文法に従う
◎ア 離散的
◎表終
`~mask~border画像@
として利用される画像を指定する。
◎
Specifies an image to be used as mask border image.
次に該当する画像は、
無視され，要素を~maskしない
— それでも，`~mask~border画像$として数えられるが
⇒＃
空~画像である（横幅または縦幅が 0 ）／
~downloadに失敗した ／
存在しない ／
表示できない（例：~supportされる画像~形式でない）
◎
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.
`~mask~border画像$を処理する方法は、
`~maskの処理-法$secを見よ。
◎
See “Mask processing” on how to process the mask border image.
算出d値が `none^v 以外になる場合
— `opacity$p の値が 1 未満のときと同じ仕方で —
`積層~文脈$を作成させる。
`CSS21$r
◎
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$p, `mask-image$p
］は、
互いに独立に指定できる。
両~propとも `none^v 以外の値をとる場合、
要素は 両~masking演算により順に~maskされる。
◎
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$p, `mask-border-source$p
どちらの演算を先に適用しようが、
描画した結果は同じになる。
◎
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画像の解釈： `mask-border-mode^p ~prop
◎名 `mask-border-mode@p
◎値 `luminance^v | `alpha^v
◎初 `alpha^v
◎適 `mask-image$p と同じ
◎
All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
◎継 されない
◎百 受容しない
◎算 指定されたとおり
◎順 文法に従う
◎ア 離散的
◎表終
`mask-border-mode$p ~propは、
`mask-border-source$p 用の `image$t 値は［
輝度~mask, ~alpha~mask
］のどちらとして扱われるかを指示する（`~maskの処理-法$secを見よ）。
◎
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@v
`~mask~border画像$の~alpha値が~mask値として利用されるべきであることを指示する。
`~mask値の計算-法$secを見よ。
◎
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@v
`~mask~border画像$の輝度~値が~mask値として利用されるべきであることを指示する。
`~mask値の計算-法$secを見よ。
◎
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$p ／ `mask-type$p
］~propは、
`~mask~border画像$の型【当の`~mask画像$における~alpha~channelの有無など？】には影響させないモノトスル。
◎
The mask-mode and mask-type properties must have no affect on the mask border image type.
◎名 `mask-border-slice@p
◎値 [ `number$t | `percentage$t ]{1,4} `fill$v?
◎初 `0^v
◎適 `mask-image$p と同じ
◎
All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
◎継 されない
◎百
`~mask~border画像$の~sizeを基準にする
◎
refer to size of the mask border image
◎算 指定されたとおり
◎順 文法に従う
◎ア 離散的
◎表終
この~propは、
`~mask~border画像$を 9 個の領域
— 4 隅, 4 辺, 真中 —
に分割0するときの［
上端, 右端, 下端, 左端
］辺からの内方~offsetを指定する。
真中~~部位の画像は、
`fill@v
~keywordが無い場合には，破棄され，全部的に不透明な白として扱われる（真中~~部位に覆われる内容は，~maskされず~~透過する）。
◎
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$p ~propを見よ。
`CSS3BG$r
。
◎
See the border-image-slice property [CSS3BG] for the definitions of the property values.
8.4. ~masking区画： `mask-border-width^p ~prop
◎名 `mask-border-width@p
◎値 [ `length-percentage$t | `number$t | auto ]{1,4}
◎初 `auto^v
◎適 `mask-image$p と同じ
◎
All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
◎継 されない
◎百
`~mask~border画像~区画$の横幅／縦幅に相対的
◎
relative to width/height of the mask border image area
◎算
`length$t は絶対~化される／
他は指定されたとおり
◎
all <length>s made absolute, otherwise as specified
◎順 文法に従う
◎ア 離散的
◎表終
`~mask~border画像$は
`~mask~border画像~区画@
と呼ばれる区画の内側に描かれる。
この区画の境界は、
既定では，~border~boxに対応する
— `mask-border-outset$p を見よ。
◎
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$p ~propを見よ。
`CSS3BG$r
◎
See the border-image-width property [CSS3BG] for the definitions of the property values.
注記：
~layout~boxが結付けられない~SVG要素に対しては、
`border-width$p は `0^v と見なされる。
◎
Note: For SVG elements without an associated layout box the border-width is considered to be 0.
8.5. 辺の張り出し： `mask-border-outset^p ~prop
◎名 `mask-border-outset@p
◎値 [ `length$t | `number$t ]{1,4}
◎初 `0^v
◎適 `mask-image$p と同じ
◎
All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
◎継 されない
◎百 受容しない
◎算
`length$t はすべて絶対~化される／
他は指定されたとおり
◎
all <length>s made absolute, otherwise as specified
◎順 文法に従う
◎ア 離散的
◎表終
値は、
`~mask~border画像~区画$が~border~boxを超えて拡張する量を指定する。
~~成分~値たちは、
~borderの各 辺から区画を成す各 辺までの外方~offsetを`時計回りに設定する$。
◎
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$p と同じく、
`number$t は，対応する `border-width$p の何倍になるかを表現する。
負な値は、
`mask-border-outset$p を成す どの値にも許容されない。
◎
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.
注記：
~layout~boxが結付けられない~SVG要素に対しては、
`border-width$p は `0^v と見なされる。
◎
Note: For SVG elements without associated layout box the border-width is considered to be 0.
◎名 `mask-border-repeat@p
◎値 [ `stretch^v | `repeat^v | `round^v | `space^v ]{1,2}
◎初 `stretch^v
◎適 `mask-image$p と同じ
◎
All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
◎継 されない
◎百 受容しない
◎算 指定されたとおり
◎順 文法に従う
◎ア 離散的
◎表終
この~propは、
`~mask~border画像$の［
各~側, 真中
］~~部位~用の画像が，どう拡縮され, 敷詰められるかを指定する。
1 個目, 2 個目の~keywordは、
順に［
横方向, 縦方向
］側に適用される。
2 個目の~keywordが無い場合、
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$p ~propを見よ。
`CSS3BG$r
◎
See the border-image-repeat property [CSS3BG] for the definitions of the property values.
`~mask~border画像$を成す各部を拡縮して敷詰めるための正確な処理-は、
`§ ~mask~border画像による~masking＠#masking-with-the-mask-border-image$
にて与えられる
◎
The exact process for scaling and tiling the mask border image parts is given in the section Masking with the mask border image
これは、
次に挙げる~propを設定するための略式~propである
— 省略された値は、
それぞれの初期~値に設定される
⇒＃
`mask-border-source$p,
`mask-border-slice$p,
`mask-border-width$p,
`mask-border-outset$p,
`mask-border-repeat$p,
`mask-border-mode$p,
◎
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$p 略式~propは、
上に挙げた各種 `mask-border-*^p ~propを設定し直す。
◎
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画像による~masking
`mask-border-source$p により与えられた`~mask~border画像$が
`mask-border-slice$p 値により切分けられた結果の 9 個の画像は、
`§ ~border画像の描画法＠~CSSBG#border-image-process$
に述べられるように，4 段の手続きを経て，それぞれに対応する`~mask~border画像$領域の中へ
拡縮され, 位置され, 敷詰められる
`CSS3BG$r
。
◎
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~box~modelで整形される要素に対する `mask-border-source$p ~propの適用は
— `opacity$p の値が 1 未満のときと同じ仕方で —
`積層~文脈$を確立させる。
要素のすべての子孫は、
一体の~groupとして~maskingが適用された上で，~groupとして一緒に描画される。
◎
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$p ~propは、
どの要素の~CSS~boxに対しても，その幾何や接触判定に対する効果は無い。
◎
The mask-border-source property has no effect on the geometry or hit-testing of any element’s CSS boxes.
［
`x$a, `y$a, `width$a, `height$a
］属性~用の座標系（これらの属性は どのような座標系における値を表現するか）を定義する。
`mask$p ~propを介してこの要素を参照している要素（すなわち，この要素が定義する~maskが適用される要素）を %E で表すとき、
この座標系は，指定された値に応じて 次で与えられる：
◎
Defines the coordinate system for attributes x, y, width and height.
`userSpaceOnUse@vMU
%E 用の`利用元~座標系$に一致するように確立される。
`CSS3-TRANSFORMS$r
◎
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@vMU
座標［
(0, 0) ／ (1, 1)
］が %E の`限界~box$の［
左上~隅 ／ 右下~隅
］に写像されるように確立される。
その`利用元~単位$と~CSS `px$u 単位は等価になる。
◎
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$vMU が指定されていたかのようになる。
◎
If attribute maskUnits is not specified, then the effect is as if a value of objectBoundingBox were specified.
`mask$e 要素の内容~用の`利用元~座標系$を定義する。
この座標系は、
指定された値に応じて， `maskUnits$a 属性に対するときと同様に定義される。
◎
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$vMCU が指定されていたかのようになる。
◎
If attribute maskContentUnits is not specified, then the effect is as if a value of userSpaceOnUse were specified.
~animate可能。
◎
Animatable: yes.
`x@a = "`length-percentage$t"
アリな最も広い~offscreen~buffer用の矩形を成す左上~隅の x-軸~座標を与える。
この属性が指定されていない場合の効果は、
要素が下に与える条件 (A) が満たすならば，値 `-10%^v が指定されていたかのようになる。
◎
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.
~animate可能。
◎
Animatable: yes.
`y@a = "`length-percentage$t"
y-軸~座標を与えることを除き、
`x$a 属性と同じに定義される。
◎
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@a = "`length-percentage$t"
アリな最も広い~offscreen~bufferの横幅を与える。
値が 0 以下の場合、
要素の描画は不能化される。
この属性が指定されていない場合の効果は、
要素が下に与える条件 (A) を満たすならば，値 `120%^v が指定されていたかのようになる。
◎
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.
~animate可能。
◎
Animatable: yes.
`height@a = "`length-percentage$t"
~bufferの縦幅を与えることを除き、
`width$a 属性と同じに定義される。
◎
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) を満たすならば、
所与の【~maskされる】~objと［
`x$a, `y$a, `width$a, `height$a
］により定義される矩形は，【~objの】現在の切抜き~pathを確立する。
~mask【される~obj】の描画される内容は、
この切抜き~pathで切抜くモノトスル。
◎
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.
`mask$e 要素は、
先祖から~CSS~propを継承するが，
`mask$e 要素を参照している要素からは継承しない。
◎
CSS properties inherit into the mask element from its ancestors; properties do not inherit from the element referencing the mask element.
`mask$e 要素は、
直に描画されることは決してない。
その用途は、
`mask$p ~propを利用して参照する他にない。
［
`opacity$p,
`filter$p,
`display$p
］~propは、
`mask$e 要素には適用されない。
特に，［
`mask$e 要素, および その先祖
］の `display$p ~propの値が何であれ、
`mask$e 要素は，直に描画されることはなく, また参照~用に可用になる。
◎
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.
`mask-type$p ~propは、
`mask$e 要素の内容は［
輝度~mask, ~alpha~mask
］のどちらとして扱われるかを定義する。
`~mask値の計算-法$secを見よ。
◎
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@v
~maskの輝度~値が利用されるべきであることを指示する。
◎
Indicates that the luminance values of the mask should be used.
`alpha@v
~maskの~alpha値が利用されるべきであることを指示する。
◎
Indicates that the alpha values of the mask should be used.
`mask-type$p ~propは、
作者が， `mask$e 要素に選好する~masking~modeを指定できるようにする。
しかしながら，作者は、
~maskされる内容~上の `mask-mode$p 値を `match-source$v1 と異なる何かに設定することで，この選好を上書きできる。
◎
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$p の算出d値は `luminance$v1 に,
`mask-mode$p の算出d値は `match-source$v1 になる。
~UAは、
`mask$e 要素~上で【 `mask-mode$p により】定義される，選好される~masking~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;">
<!--
~maskされる内容
◎
This is the masked content.
-->
</p>
次の例では、
`mask-mode$p の算出d値は `alpha$v1になり，
`mask$e 要素~上の `luminance$v に算出される選好を上書きする。
`~mask層~画像$は、
~alpha~maskとして利用される。
◎
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;">
<!--
~maskされる内容
◎
This is the masked content.
-->
</p>
`mask-type$p ~propは、
~SVG要素~用の`呈示~属性$である。
◎
The mask-type property is a presentation attribute for SVG elements.
~privacyの考慮点
~masking演算
【`§ 組成-法＠#the-mask-composite$】
の計時は、
各
【！source and destination】
`~mask層~画像$を成す画素に依存しないことが重要になる。
~masking演算は、［
画素~値に関わらず，かかる時間は常に同じになる仕方
］で実装するモノトスル。
この規則に従わなかった場合、
攻撃者は情報を推定して，計時~攻撃を仕掛けることもできる。
◎
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.
計時~攻撃は、
演算にかかる時間を調査して，保護されている内容についての情報を得する手法である。
例えば，赤色~画素を描く方が緑色~画素より余計にかかる場合、
要素の内容に一切~accessすることなく，描画されている要素の大まかな画像を構築し直せるかもしれない。
◎
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.
この~moduleに定義される様な~CSS能力は，~site訪問者から内容を隠すためにも利用できるが、
~Web開発者は，これらの特能を［
`敏感^emな内容を利用者や~pageの~scriptから隠す
］ために利用するベキでない。
内容は、
~CSSを介して利用者への表示から隠されても，［
~pageの~scriptや~form提出
］からは~accessでき，読取れる。
~Web開発者は、
この仕様における能力を
— ~privacy境界を［
課す／防御する
］ものではなく —
（すべての~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.
~securityの考慮点
`mask-source$t ／ `clip-source$t
には、
資源の~fetchingに対し特別な要件がある。
◎
<mask-source>s and <clip-source>s have special requirements on fetching resources.
~UAは、［
`mask-image$p ／ `mask-border-source$p ／ `clip-path$p
］上の どの `url$t に対しても，
`~CORSも可能化され得る~fetch＠~FETCH#main-fetch$ `FETCH$r
を利用するモノトスル。
~fetchするときは、［
"Anonymous" ~modeを利用する,
~referrer~sourceは~stylesheetの~URLに設定する,
生成元は包含している文書の~URLに設定する
］モノトスル†。
この結果が~network~errorになる場合の効果は、
値 `none^v が指定されていたかのようになるとする。
◎
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.
◎名 `clip@p
◎値 `rect()$t | `auto$v
◎初 `auto^v
◎適
`絶対的に位置され$た要素。
~SVGにおいては、
次に挙げるものに適用される
⇒
`新たな表示域を確立する要素$,
`pattern$e 要素,
`mask$e 要素
◎
Absolutely positioned elements. In SVG, it applies to elements which establish a new viewport, pattern elements and mask elements.
◎継 されない
◎百 受容しない
◎算 指定されたとおり
◎順 文法に従う
◎ア 算出d値の型による
◎表終
`clip$p ~prop `CSS21$r は、
この仕様により非推奨にされた。
作者には、
代わりに `clip-path$p ~propを利用することが奨励される。
~UAは、
`clip$p ~propを~supportするモノトスル。
◎
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:
［
`top$t ／ `right$t ／ `left$t ／ `bottom$t
］は、
~boxの［
上端／左端／上端／左端
］~border辺から，切抜き領域の［
上端／右端／下端／左端
］辺までの~offsetを指定する。
◎
<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.＼
作者は、
各~offsetを~commaで分離するべきである。
~UAは、
~commaによる分離を~supportするモノトスル。
また、
~commaなしの（空白による）分離を~supportしてもヨイ（ただし，~commaとの組合nは不可とする）
— この仕様【 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>, 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).
◎
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$p ~propは、
~SVG要素~用の`呈示~属性$である。
◎
The clip property is a presentation attribute for SVG elements.
次の規則は：
◎
Example: The following two rules:
div {
clip: rect(1em, 11em, 9em, 1em);
}
`div^e の~border辺の外縁［
横幅 × 縦幅
］が［
`10em^v × `11em^v
］ならば、
次の図に示される破線で囲まれた，矩形な切抜き領域を作成することになる：
◎
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:
`rect^f による図形~用の各側の値
◎
Values for rect shape
矩形な切抜き領域を伴う塊~boxを示す図式。
◎
This diagram illustrates two block boxes, one next to the other, with rectangular clipping regions of different dimensions. (See long description.)
~IF［
%stroke ~EQ `none^v
］~OR［
%width ~EQ 0
］
⇒
~RET %~box
◎
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.
%係数 ~LET 1
◎
↓
~IF［
%要素 は［
`rect$e ／ `ellipse$e ／ `circle$e ／ `image$e
］でない
］：
◎
If element is not rect, ellipse, circle or image just follow one of the following conditions in the order they apply:
~IF［
%linejoin ~EQ `miter$v
］
⇒
%係数 ~SET ［
次が満たされるならば √2 ／
~ELSE_ %miterlimit
］
⇒
［
%miterlimit ~LT √2
］~AND［
%linecap ~EQ `square$v
］
◎
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.
~ELIF［
%linecap ~EQ `square$v
］
⇒
%係数 ~SET √2
◎
the used value for stroke-linecap is square
• Multiply delta with the square root of 2.
%~box の各~辺を ( %係数 ~MUL %width ~DIV 2 ) だけ外へ拡げる
◎
Inflate box with the value of delta.
~RET %~box
◎
Return box.
注記：
［
`stroke-opacity$p ／ `stroke-dasharray$p ／ `stroke-dashoffset$p
］は、
`~stroke限界~box$の計算には影響しない。
◎
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$e 要素
◎
use
%親 ~LET ［
`容器~要素$ならば それ ／
`use$e 要素ならば`それが~hostしている~shadow~tree＠~SVGstruct#TermUseElementShadowTree$の根
］
◎
Let parent be the container element if it is one, or the root of the use element’s shadow tree otherwise.
~RET ［
%親 の~EACH( 子 %子 ) に対し，次で与えられる~box
］すべてを包含する最~小な矩形
⇒
%子 の`~stroke限界~box$を %子 の座標~空間から %親 の座標~空間に写像した結果
◎
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$e 要素
◎
image
~RET %要素 の`~obj限界~box$
◎
Return the object bounding box of element.
注記：
~SVG仕様の将来~versionは、
この節を上書きし得る。
◎
Note: A future version of the SVG specification may override this section.
付録 C. ~DOM~interface
~interface `SVGClipPathElement^I
`SVGClipPathElement@I
~interfaceは、
`clipPath$e 要素に対応する。
◎
The SVGClipPathElement interface corresponds to the clipPath element.
`clipPathUnits@m
◎
clipPathUnits, of type SVGAnimatedEnumeration, readonly
コレの `clipPathUnits$a 属性に対応する。
`SVGUnitTypes$I にて定義される，いずれかの定数をとる。
◎
Corresponds to attribute clipPathUnits on the given clipPath element. Takes one of the constants defined in SVGUnitTypes.
`transform@m
◎
transform, of type SVGAnimatedTransformList, readonly
コレの `transform$p 呈示~属性に対応する。
◎
Corresponds to presentation attribute transform on the given element.
~interface `SVGMaskElement^I
`SVGMaskElement$I ~interfaceは、
`mask$e 要素に対応する。
◎
The SVGMaskElement interface corresponds to the mask element.
`maskUnits@m
◎
maskUnits, of type SVGAnimatedEnumeration, readonly
コレの `maskUnits$a 属性に対応する。
`SVGUnitTypes$I にて定義される，いずれかの定数をとる。
◎
Corresponds to attribute maskUnits on the given mask element. Takes one of the constants defined in SVGUnitTypes.
`maskContentUnits@m
◎
maskContentUnits, of type SVGAnimatedEnumeration, readonly
コレの `maskContentUnits$a 属性に対応する。
`SVGUnitTypes$I にて定義される，いずれかの定数をとる。
◎
Corresponds to attribute maskContentUnits on the given mask element. Takes one of the constants defined in SVGUnitTypes.
`x@m
◎
x, of type SVGAnimatedLength, readonly
コレの `x$a 属性に対応する。
◎
Corresponds to attribute x on the given mask element.
`y@m
◎
y, of type SVGAnimatedLength, readonly
コレの `y$a 属性に対応する。
◎
Corresponds to attribute y on the given mask element.
`width@m
◎
width, of type SVGAnimatedLength, readonly
コレの `width$a 属性に対応する。
◎
Corresponds to attribute width on the given mask element.
`height@m
◎
height, of type SVGAnimatedLength, readonly
コレの `height$a 属性に対応する。
◎
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.