css-masking-ja.html

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8">
<title>CSS Masking Module Level 1</title>

<link rel="stylesheet" href="common.css" type="text/css">
<link rel="stylesheet" href="common-svg.css" type="text/css">

<style>

.ex-mask-composite {
	width: 200px;
	height: 200px;
	border: thin solid black;
	background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld2JveD0iMCAwIDIwIDIwIj4KPHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiBmaWxsPSJ3aGl0ZSIvPgo8cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIGZpbGw9ImxpZ2h0Ymx1ZSIvPgo8cmVjdCB4PSIxMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0ibGlnaHRibHVlIi8+Cjwvc3ZnPg==");
}
.ex-mask-composite path {
	fill:black;
	stroke:none;
}

.ex-demo {
	background: #F0FFF0;
	color: black;
	padding: 10px;
}
.ex-demo > div {
	display: inline-block;
	vertical-align: top;
}

x-demobox {
	display: block;
	width: 190px;
	height: 190px;
}

._ex-clip {
	position:relative;
	font-size: small;
	height: 13em;
	width: 12em;
}

._ex-clip > div {
	position: absolute;
	border: solid 0.5em var(--K-color);
	background: lightblue;
	overflow: hidden;
	top: 1em;
	left: 1em;
	width: 9em;
	height: 10em;
}

</style>

<script src="common0.js"></script>
<script src="common1.js" async></script>


<script>

Util.ready = function(){
	COMMON_DATA.PREMAP += PAGE_DATA.PREMAP;
	const source_data = {
		generate: expand,
	};

	Util.switchWordsInit(source_data);
}


function expand(){
	const class_map = this.class_map;
	const tag_map = this.tag_map;
	const link_map = this.link_map;

	let context_prop = '';
	let context_prop1 = '';

	return this.html.replace(
		/%[~一-鿆\w\-]+|`(.+?)([$@\^])(\w*)/g,
		create_html
	);

	function create_html(match, key, indicator, klass){
if(!indicator) {//%
	return `<var>${match.slice(1)}</var>`;
}

let href = '';
let href1 = '';
{
	const n = key.indexOf('＠');
	if(n > 0) {
		href1 = key.slice(n + 1);
		key = key.slice(0, n);
	}
}
let text = key;

switch(klass){
case 'r':
	text = `[${key}]`;
	href = `#biblio-${key.toLowerCase()}`;
	break;
case 'p':
	if( indicator === '@') {
		context_prop = `#valdef-${key}-`;
	} else {
		context_prop1 = `#valdef-${key}-`;
	}
	break;
case 't':
	text = `&lt;${key}&gt;`;
	break;
case 'tp':
	text = `&lt;'<code class="property">${key}</code>'&gt;`;
	href = link_map[`p.${key}`];
	break;
case 'f':
	text = `${key}()`;
	break;
case 'v':
	href = context_prop + key;
	break;
case 'v1': // css values
	href = context_prop1 + key;
	break;
case 'l':
	text = `"<code class="literal">${text}</code>"`;
	break;
case 'dgm':
	return `<a id="_dgm-${key}">＊</a>`;
case 'issue':
	href = `https://github.com/w3c/fxtf-drafts/issues/${key}`;
	text = `課題 #${key}`;
	break;
case 'en':
	return `<span lang="en">${key}</span>`;
	break;
}

let tag = tag_map[klass];
if(tag) {
	let classname = class_map[klass];
	classname = classname ? ` class="${classname}"` : '';
	text = `<${tag}${classname}>${text}</${tag}>`;
}

if(indicator !== '^'){
	href = href1 || link_map[ klass ? `${klass}.${key}` : key ] || href;
	if(!href){
		console.log(match); // check error
		return match;
	}

	switch(indicator){
	case '$':
		text = `<a href="${href}">${text}</a>`;
		break;
	case '@':
		text = `<dfn id="${href.slice(1)}">${text}</dfn>`;
		break;
	default:
		console.log(match);
		return match;
	}
}

return text;

	}


}

</script>

<script type="text/plain" id="_source_data">


●●options

spec_title:CSS Masking Module Level 1
spec_date:2024-01-13
trans_update:2024-06-20
source_checked:240113
page_state_key:SVG
original_url:https://drafts.fxtf.org/css-masking-1/
spec_status:ED
ref_id_prefix:biblio-
ref_id_lowercase:true
site_nav:paint,css
conformance:css
copyright:2024,permissive
trans_1st_pub:2018-07-19


●●class_map
p:property
pe:pseudo
t:type
f:func
tp:type
u:unit
v:value
v1:value
vCPU:value
vMCU:value
vMU:value
et:event-type
e:element
a:attr
css:css

●●tag_map
p:code
pe:code
t:var
tp:var
f:code
u:code
v:code
v1:code
vCPU:code
vMCU:code
vMU:code
css:code
e:code
et:code
a:code
I:code
m:code
c:code

●●PREMAP
要素名:<table class="def-table elemdef"><tbody><tr><th>名前<td>
分類:<tr><th>分類<td>
内容:<tr><th>内容~model<td>
属性:<tr><th>属性<td>
界面:<tr><th>~DOM~interface<td>

●●original_id_map

setup-clockwise:
valdef-box-shadow-none:box-shadow-none

	_geometry-border-box:valdef-mask-clip-border-box
	_geometry-border-box:valdef-mask-origin-border-box
	_geometry-content-box:valdef-mask-clip-content-box
	_geometry-content-box:valdef-mask-origin-content-box
	_geometry-fill-box:valdef-clip-path-fill-box
	_geometry-fill-box:valdef-mask-clip-fill-box
	_geometry-fill-box:valdef-mask-origin-fill-box
	_geometry-padding-box:valdef-mask-clip-padding-box
	_geometry-padding-box:valdef-mask-origin-padding-box
	_geometry-stroke-box:valdef-clip-path-stroke-box
	_geometry-stroke-box:valdef-mask-clip-stroke-box
	_geometry-stroke-box:valdef-mask-origin-stroke-box
	_geometry-view-box:valdef-clip-path-view-box
	_geometry-view-box:valdef-mask-clip-view-box
	_geometry-view-box:valdef-mask-origin-view-box

●●mdn_urls
propdef-clip:CSS/clip
propdef-clip-path:CSS/clip-path
propdef-clip-rule:SVG/Attribute/clip-rule
propdef-mask:CSS/mask
propdef-mask-border:CSS/mask-border
propdef-mask-border-mode:CSS/mask-border-mode
propdef-mask-border-outset:CSS/mask-border-outset
propdef-mask-border-repeat:CSS/mask-border-repeat
propdef-mask-border-slice:CSS/mask-border-slice
propdef-mask-border-source:CSS/mask-border-source
propdef-mask-border-width:CSS/mask-border-width
propdef-mask-clip:CSS/mask-clip
propdef-mask-composite:CSS/mask-composite
propdef-mask-image:CSS/mask-image
propdef-mask-mode:CSS/mask-mode
propdef-mask-origin:CSS/mask-origin
propdef-mask-position:CSS/mask-position
propdef-mask-repeat:CSS/mask-repeat
propdef-mask-size:CSS/mask-size
propdef-mask-type:CSS/mask-type

elementdef-clippath:SVG/Element/clipPath
elementdef-mask:SVG/Element/mask

svgclippathelement:API/SVGClipPathElement
svgmaskelement:API/SVGMaskElement

●●link_map

	●idl
Exposed:~WEBIDLjs#Exposed

I.SVGAnimatedEnumeration:~SVGtypes#InterfaceSVGAnimatedEnumeration
I.SVGAnimatedLength:~SVGtypes#InterfaceSVGAnimatedLength
I.SVGAnimatedTransformList:~SVGcoords#InterfaceSVGAnimatedTransformList
I.SVGClipPathElement:#svgclippathelement
I.SVGElement:~SVGtypes#InterfaceSVGElement
I.SVGMaskElement:#svgmaskelement
I.SVGUnitTypes:~SVGtypes#InterfaceSVGUnitTypes

	I.SVGClipPathElement:#InterfaceSVGClipPathElement
	I.SVGMaskElement:#InterfaceSVGMaskElement


m.clipPathUnits:#dom-svgclippathelement-clippathunits
m.height:#dom-svgmaskelement-height
m.maskContentUnits:#dom-svgmaskelement-maskcontentunits
m.maskUnits:#dom-svgmaskelement-maskunits
m.transform:#dom-svgclippathelement-transform
m.width:#dom-svgmaskelement-width
m.x:#dom-svgmaskelement-x
m.y:#dom-svgmaskelement-y

	●a/e
e.a:~SVGlinking#elementdef-a
e.circle:~SVGshapes#elementdef-circle
e.clipPath:#elementdef-clippath
e.defs:~SVGstruct#elementdef-defs
e.ellipse:~SVGshapes#elementdef-ellipse
e.feColorMatrix:~FILTERS#elementdef-fecolormatrix
e.filter:~FILTERS#elementdef-filter
e.foreignObject:~SVGembedded#elementdef-foreignObject
e.image:~SVGembedded#elementdef-image
e.marker:~SVGpainting#elementdef-marker
e.mask:#elementdef-mask
e.path:~SVGpaths#elementdef-path
e.pattern:~SVGpservers#elementdef-pattern
e.rect:~SVGshapes#elementdef-rect
e.script:~SVGinteract#elementdef-script
e.style:~SVGstyling#elementdef-style
e.switch:~SVGstruct#elementdef-switch
e.text:~SVGtext#elementdef-text
e.use:~SVGstruct#elementdef-use
e.view:~SVGlinking#elementdef-view

e.altGlyphDef:~SVG11/text.html#AlternateGlyphDefinitions
e.color-profile:~SVG11/color.html#ColorProfileElement
e.cursor:~SVG11/interact.html#CursorElement
e.font:~SVG11/fonts.html#FontElement
e.font-face:~SVG11/fonts.html#FontFaceElement

	e.desc
	e.title
	e.metadata
		→ 記述的~要素
	e.line
	e.polygon
	e.polyline
		→ 図形~要素
	e.linearGradient
	e.radialGradient
		→ ~gradient要素
	e.g
	e.svg
	e.symbol
		→ 構造上の要素
	e.set
	e.animate
	e.animateColor
	e.animateMotion
	e.animateTransform
		→ ~animation要素

a.class:~SVGstyling#ClassAttribute
a.id:~SVGstruct#IDAttribute
a.requiredExtensions:~SVGstruct#RequiredExtensionsAttribute
a.requiredFeatures:~SVG11/struct.html#RequiredFeaturesAttribute
a.style:~SVGstyling#StyleAttribute
a.systemLanguage:~SVGstruct#SystemLanguageAttribute
a.transform:~SVGcoords#TransformProperty
a.viewBox:~SVGcoords#ViewBoxAttribute
a.clipPathUnits:#element-attrdef-clippath-clippathunits
a.height:#element-attrdef-mask-height
a.maskContentUnits:#element-attrdef-mask-maskcontentunits
a.maskUnits:#element-attrdef-mask-maskunits
a.width:#element-attrdef-mask-width
a.x:#element-attrdef-mask-x
a.y:#element-attrdef-mask-y

a.externalResourcesRequired:~SVG11/struct.html#ExternalResourcesRequiredAttribute
	a.class:~SVG11/styling.html#ClassAttribute
	a.id:~SVG11/struct.html#IDAttribute
	a.requiredExtensions:~SVG11/struct.html#RequiredExtensionsAttribute
	a.style:~SVG11/styling.html#StyleAttribute
	a.systemLanguage:~SVG11/struct.html#SystemLanguageAttribute
	a.transform:~SVG11/coords.html#TransformAttribute

	●p,t,v,f
p.clip-path:#propdef-clip-path
p.clip-rule:#propdef-clip-rule
p.clip:#propdef-clip

p.mask-border-mode:#propdef-mask-border-mode
p.mask-border-outset:#propdef-mask-border-outset
p.mask-border-repeat:#propdef-mask-border-repeat
p.mask-border-slice:#propdef-mask-border-slice
p.mask-border-source:#propdef-mask-border-source
p.mask-border-width:#propdef-mask-border-width
p.mask-border:#propdef-mask-border
p.mask-clip:#propdef-mask-clip
p.mask-composite:#propdef-mask-composite
p.mask-image:#propdef-mask-image
p.mask-mode:#propdef-mask-mode
p.mask-origin:#propdef-mask-origin
p.mask-position:#propdef-mask-position
p.mask-repeat:#propdef-mask-repeat
p.mask-size:#propdef-mask-size
p.mask-type:#propdef-mask-type
p.mask:#propdef-mask

p.pointer-events:~CSSUI#propdef-pointer-events

p.background-origin:~CSSBG#propdef-background-origin
p.background-position:~CSSBG#propdef-background-position
p.background-repeat:~CSSBG#propdef-background-repeat
p.background-size:~CSSBG#propdef-background-size
p.background-image:~CSSBG#propdef-background-image
p.background-clip:~CSSBG#propdef-background-clip

p.border-image-source:~CSSBG#propdef-border-image-source
p.border-image-repeat:~CSSBG#propdef-border-image-repeat
p.border-image-slice:~CSSBG#propdef-border-image-slice
p.border-image-width:~CSSBG#propdef-border-image-width
p.border-image-outset:~CSSBG#propdef-border-image-outset
p.border-image:~CSSBG#propdef-border-image
p.border-radius:~CSSBG#propdef-border-radius
p.border-width:~CSSBG#propdef-border-width
p.box-decoration-break:~CSSBREAK#propdef-box-decoration-break

p.display:~CSSDISP#propdef-display

p.filter:~FILTERS#propdef-filter
p.opacity:~CSSCOLOR#propdef-opacity
p.overflow:~CSSOVERFLOW3#propdef-overflow
p.transform:~TRANSFORM#propdef-transform
p.visibility:~CSSDISP#propdef-visibility

p.color-interpolation:~SVGpainting#ColorInterpolationProperty
p.fill-rule:~SVGpainting#FillRuleProperty
p.fill:~SVGpainting#FillProperty
p.stroke:~SVGpainting#StrokeProperty
p.stroke-dasharray:~SVGpainting#StrokeDasharrayProperty
p.stroke-dashoffset:~SVGpainting#StrokeDashoffsetProperty
p.stroke-linecap:~SVGpainting#StrokeLinecapProperty
p.stroke-linejoin:~SVGpainting#StrokeLinejoinProperty
p.stroke-miterlimit:~SVGpainting#StrokeMiterlimitProperty
p.stroke-opacity:~SVGpainting#StrokeOpacityProperty
p.stroke-width:~SVGpainting#StrokeWidthProperty

t.basic-shape:~CSSSHAPES#typedef-basic-shape
t.bg-size:~CSSBG#typedef-bg-size
t.clip-source:#typedef-clip-source
t.compositing-operator:#typedef-compositing-operator
t.coord-box:~CSSBOX#typedef-coord-box
t.geometry-box:#typedef-geometry-box
t.image:~CSSIMAGE#typedef-image
t.length-percentage:~CSSVAL#typedef-length-percentage
t.length:~CSSVAL#length-value
t.mask-layer:#typedef-mask-layer
t.mask-reference:#typedef-mask-reference
t.mask-source:#typedef-mask-source
t.masking-mode:#typedef-masking-mode
	t.number-percentage:~CSSVAL#typedef-number-percentage
	→ number | percentage
t.percentage:~CSSVAL#percentage-value
t.number:~CSSVAL#number-value
t.position:~CSSVAL#typedef-position
t.repeat-style:~CSSBG#typedef-repeat-style
t.shape-box:~CSSSHAPES#typedef-shape-box
t.url:~CSSVAL#url-value

	vt.url:#valdef-mask-image-url


f.polygon:~CSSSHAPES#funcdef-basic-shape-polygon
f.circle:~CSSSHAPES#funcdef-basic-shape-circle

f.rect:#funcdef-clip-rect
t.rect():#funcdef-clip-rect
t.bottom:#typedef-clip-bottom
t.left:#typedef-clip-left
t.right:#typedef-clip-right
t.top:#typedef-clip-top

v.~auto0:#_valdef-rect-auto

v.margin-box:#_geometry-margin-box
v.border-box:#_geometry-border-box
v.padding-box:#_geometry-padding-box
v.content-box:#_geometry-content-box
v.fill-box:#_geometry-fill-box
v.stroke-box:#_geometry-stroke-box
v.view-box:#_geometry-view-box


	v.add:#valdef-mask-composite-add
	v.exclude:#valdef-mask-composite-exclude
	v.intersect:#valdef-mask-composite-intersect
	v.subtract:#valdef-mask-composite-subtract

	v.fill:#valdef-mask-border-slice-fill

	v.luminance:#valdef-mask-border-mode-luminance
	v.alpha:#valdef-mask-border-mode-alpha

	v.alpha:#valdef-mask-mode-alpha
	v.luminance:#valdef-mask-mode-luminance
	v.match-source:#valdef-mask-mode-match-source


	v.alpha:#valdef-mask-type-alpha
	v.alpha:#valdef-mask-type-alpha
	v.luminance:#valdef-mask-type-luminance

	v.border-box:#valdef-mask-clip-border-box
	v.content-box:#valdef-mask-clip-content-box
	v.fill-box:#valdef-mask-clip-fill-box
	v.padding-box:#valdef-mask-clip-padding-box
	v.stroke-box:#valdef-mask-clip-stroke-box
	v.view-box:#valdef-mask-clip-view-box
v.no-clip:#valdef-mask-clip-no-clip
	v.margin-box:


	v.border-box:#valdef-mask-origin-border-box
	v.content-box:#valdef-mask-origin-content-box
	v.fill-box:#valdef-mask-origin-fill-box
	v.padding-box:#valdef-mask-origin-padding-box
	v.stroke-box:#valdef-mask-origin-stroke-box
	v.view-box:#valdef-mask-origin-view-box

	v.evenodd:#valdef-clip-rule-evenodd
	v.nonzero:#valdef-clip-rule-nonzero

	v.fill-box:#valdef-clip-path-fill-box
	v.stroke-box:#valdef-clip-path-stroke-box
	v.view-box:#valdef-clip-path-view-box

	v.child:~FILLSTROKE#valdef-svg-paint-child
v.linearRGB:~FILTERS#color-interpolation-filters-linearrgb
	valdef-color-interpolation-filters-linearrgb
v.miter:~FILLSTROKE#valdef-stroke-linejoin-miter
v.square:~FILLSTROKE#valdef-stroke-linecap-square

v.source-over:~COMPOSITING#source-over
v.source-out:~COMPOSITING#source-out
v.source-in:~COMPOSITING#source-in
v.xor:~COMPOSITING#xor

	v.none:~CSSDISP#valdef-display-none
	v.visible:~CSSOVERFLOW3#valdef-overflow-visible

	a.clipPathUnits
vCPU.objectBoundingBox:#valdef-clippathunits-objectboundingbox
vCPU.userSpaceOnUse:#valdef-clippathunits-userspaceonuse

	a.maskContentUnits
vMCU.objectBoundingBox:#valdef-maskcontentunits-objectboundingbox
vMCU.userSpaceOnUse:#valdef-maskcontentunits-userspaceonuse

	a.maskUnits
vMU.objectBoundingBox:#valdef-maskunits-objectboundingbox
vMU.userSpaceOnUse:#valdef-maskunits-userspaceonuse

u.px:~CSSVAL#px


	●用語
~keywordが指示する~box:#_box-by-keyword
~keywordによる基準~box:#_box-by-keyword

切抜き~path:#clipping-path
	~mask~size:#mask-size
	~mask位置:#mask-position
切抜き領域:#clipping-region
~mask層~画像:#mask-layer-image
~mask塗ng区画:#mask-painting-area
~mask位置決め区画:#mask-positioning-area
~source:#source
~dest:#destination
~mask画像:#mask-image
~mask~border画像:#mask-border-image
~mask~border画像~区画:#mask-border-image-area
~stroke限界~box:#stroke-bounding-box

sec.~mask値の計算-法:#MaskValues
sec.~maskの処理-法:#MaskValues
sec.複数の~mask画像の多層化法:#layering
	§:#layering
	§:#masking-with-the-mask-border-image
	§:#clipping
	§:#the-mask-position
	§:#the-mask-size


	●外部
時計回りに設定する:~CSSBOX#_setup-clockwise

背景~塗ng区画:~CSSBG#background-painting-area
背景~位置決め区画:~CSSBG#background-positioning-area
~border画像~区画:~CSSBG#border-image-area

多義的な画像~URL:~CSSIMAGE#css-ambiguous-image-url

積層~文脈:~CSS2J#stacking-context
使用~値:~CASCADE#used-value

利用元~座標系:~TRANSFORM#user-coordinate-system

絶対的に位置され:~CSSPOS#absolute-position

~border~box:~CSSBOX#border-box

	●SVG
~animation要素:~SVG11/intro.html#TermAnimationElement

~gradient要素:~SVGpservers#TermGradientElement
~SVG表示域:~SVGcoords#TermSVGViewport
~graphics要素:~SVGstruct#TermGraphicsElement
~obj限界~box:~SVGcoords#TermObjectBoundingBox
~text内容~要素:~SVGtext#TermTextContentElement
呈示~属性:~SVGstyling#TermPresentationAttribute
基本~図形:~SVGshapes#TermBasicShapeElement
容器~要素:~SVGstruct#TermContainerElement
新たな表示域を確立する要素:~SVGcoords#EstablishingANewSVGViewport
決して描画されない要素:~SVGrender#TermNeverRenderedElement
限界~box:~SVGcoords#TermBoundingBox

条件付き処理~属性:~SVGstruct#TermConditionalProcessingAttribute
中核~属性:~SVGstruct#TermCoreAttribute
記述的~要素:~SVGstruct#TermDescriptiveElement
図形~要素:~SVGshapes#TermShapeElement
構造上の要素:~SVGstruct#TermStructuralElement
利用元~単位:~SVGcoords#TermUserUnits

	~gradient要素:~SVG11/intro.html#TermGradientElement
	~SVG表示域:~SVG11/intro.html#TermSVGViewport
	呈示~属性:~SVG11/intro.html#TermPresentationAttribute
	新たな表示域を確立する要素:~SVG11/coords.html#EstablishingANewSVGViewport
	構造上の要素:~SVG11/intro.html#TermStructuralElement
	図形~要素:~SVG11/intro.html#TermShapeElement
	記述的~要素:~SVG11/intro.html#TermDescriptiveElement
	条件付き処理~属性:~SVG11/intro.html#TermConditionalProcessingAttribute
	中核~属性:~SVG11/intro.html#TermCoreAttributes
	利用元~単位:~SVG11/coords.html#Units


	透明な黒

	●CSSBG

	層:~CSSBG#layers
	~border画像の描法:~CSSBG#border-image-process
	隅の形状付け:~CSSBG#corner-shaping
	~border画像:~CSSBG#border-images
	~border線幅:~CSSBG#border-width
	色と~styleの遷移:~CSSBG#corner-transitions
	画像の~slicing:~CSSBG#border-image-slice
	複数の背景~画像による多層化:~CSSBG#layering
	特別な要素の背景:~CSSBG#special-backgrounds

	~TRANSITION-OLD#animtype-rect

	~paint~server要素:~SVGpainting#TermPaintServerElement
	描画-可能な要素:~SVGrender#TermRenderableElement
	~CSSBG#layering

	~SVG11:https://www.w3.org/TR/SVG11
	~SVG11:https://www.w3.org/TR/SVG
	~SVG11:https://www.w3.org/TR/2011/REC-SVG11-20110816

●●words_table1

FILLSTROKE:https://drafts.fxtf.org/fill-stroke-3/
TRANSITION-OLD:https://www.w3.org/TR/2017/WD-css-transitions-1-20171130/
auto0:auto

●●words_table

	●mask
切抜き:clipping::切り抜き::クリッピング
切抜く:clipする::切り抜く::クリップする
切抜かれ:clipされ::切り抜かれ::クリップされ
切取られ:clip outされ::切り取られ
	切抜かれて~~消える:clip away
mask::::マスク
masking:::mask 法:マスク法::マスキング
	~maskして除かれる:masking out／masked out
stroke::::ストローク
fill::::フィル
影絵:silhouette::~
	bit-OR:OR

	●層／塗り／組成／色／背景
anti-aliasing:
offscreen::::スクリーン外
Porter-Duff:
dest:destination:dest
	~mask層~画像:source and destination


組成-:composite::~
	組成-法:compositing
組成ng:compositing::組成

描かれ:drawされ::~
描く:drawする::~
描いて:drawして::~
描画法:drawing::~
絵図:drawing::~
	示す絵図:drawing illustrates
背後:behind::~
覆われ:coverされ::~
覆う:coverする::~
多層化法:layering::~::多レイヤ法
塗り:paint::~
塗る:paintする::~
塗られ:paintされ::~
塗ng:painting::塗り
graphics::::グラフィックス
	graphicな:graphical
	要素:filter primitive

RGB:
RGBA:
dot::::ドット
gradient:
sRGB:
alpha::::アルファ
grayscale::::グレイスケール
輝度:luminance::~
	輝度を~alphaに換算する:luminance-to-alpha
透明度:transparency::~
不透明度:opacity::~
線型明度:linear light::~
乗算済み:premultiplied::~
	乗算済みでない:non-premultiplied
緑色:green::~
赤色:red::~
黒:black::~
白:white::~
	方が〜近い:closer
線形:linear::~
	線形~RGB:linearRGB
	陰影が施され:shade

	●layout
	~scroll用の:scrolling
下位path:subpath::下位パス
伸張-:stretch::~

	●幾何
	包含する最~小な矩形:union

線:line::~
巻数:winding::~
穴:hole:~
閉な:closed::閉じた
	自身に~~交差する一筆の線:one continuous, overlapping line
切分け:slice::~
切分けら:sliceさ::~
	半径:radius::~
図形:shape::~
埋めら:fillさ::~
変形-:transform::~
側:side::~
内方:inward::~
外方:outward::~
	外方~offset:outset
外形線:outline::~
	幾何の外側にある:outside the outline
多角形:polygon::~
真円:circle::~
真円な:circularな::~
矩形:rectangle::~
矩形な:rectangularな::~
星形:star::~
頂点:point::~
地点:point::~

幾何:geometry::~
拡縮-:scale::~
時計回り:clockwise::~
反時計回り:counter-clockwise::~
横方向:horizontal::~
縦方向:vertical::~
限界域:bounds::~
限界:bounding::~
隅:corner::~
真中:middle:~

	左上~隅:one-corner／
	左上~隅:top left／:upper left
	右下:lower-right／:lower right
重合する:overlapする:重なり合う
重合しな:overlapしな:重なり合わな
	:non-overlapping
分割0:divide:分割
収まる:fitする::~
超過-:exceed::~

敷詰めら:tileさ::敷き詰めら
敷詰める:tileする::敷き詰める
敷詰法:tiling::敷き詰め法
形状付け:shaping::~

	囲まれた:delimit
	等間隔に置かれ:equally spaced
	~~間隔を~~空けて:have an offset to each other
	合間の:between
	各~辺を〜外へ拡げる:inflate
	-:inflation
	^en:even-odd
	入る:fall
	-:excess
	張り出し:overhang
	~~上:over／top
	破線:dashed lines
	~~合併:logically OR’d together

	●CSS
装飾:decoration::~
	可視でない:non-visible
可視化-:visualize::~
積層:stacking::~
	~animate可能:Animatable: yes

	●演算
演算子:operator::~
累積的:cumulative::~
丸める:roundする:~
	計算-法:calculating
	-:fraction
	-:roundする
	係数:coefficient／-

	~DIV 2:half

	●構文
繰返して:repeatして:繰り返して
繰返可能:repeat 可能:繰り返し可能
	:repeatable

	●保安
推定-:infer:~
仕掛ける:mountする:~
調査-:study:~
防御-:defend::~
訪問者:visitor:~

	余計に:longer
	大まかな:rough
	一切:without ever having
	かかる時間:take 〜 amount of time／:amount of time 〜 take
	~~外見上の:cosmetic

	●仕様
冗長さ:redundancy:~
寄与-:contribute:~
選んで:chooseして:~
提携-:affiliate:~
段階:stage:~
内来的:inherent:~
高度な:enhanced:~

	最も単純:simplest
	しようが:matter
	方が容易に:easier
	必要なしに:forgoing the need for
	相応するもの:counterpart
	逆に:conversely
	節／§:section
	可能性:possibilities
	-:respect
	について／-:with regards to
	の方が処理能は高く:perform better
	の総称:refer〜either to
	を問わず:regardless of
	と併せて:in combination with
	一方で:whereas
	加えて、:furthermore
	加えて:A couple of additions
	課す:impose
	応じて:depend
	いわゆる:so-called
	あるいは:alternatively
	特徴付け:characterizing
	見れる:can be seen
	別として:absence:possible exception
	とするとき:assuming
	-:illustration
	除外した:exclusive of

	●未分類
基準:reference::~
基準に:refer::~
隠す:hideする::~
隠され:hideされ::~
写像-:map::~
関係付ける:relateする:~
設置-:place:~
接触判定:hit-testing::~
属性定義:Attribute definitions：:属性定義：
一時的:temporary:~
一様:uniform:~
伝達曲線:transfer curve::~
	順に:in order
分類:category:~
生の:raw:~

	URL:URI
	指して／指す:refer
	参照-先:referenced
	存在しない:is non-existent
	設定し直す:reset
	作成させる:result in the creation of
	現れなく:appear しな
	-:delta
	-:childBox
	歪められ:distorted
	置く:put
	値が 0 以下:negative value or a value of zero
	Firefox
	-:referrer
	-:miter
	-:sum
	~maskされる~obj:target
	x-
	y-
	:yes
	個数／枚数:the number of
	任意個数, 任意順序の，次に挙げる要素:Any number of the following elements, in any order:
	~~透過する:show through／:shines through
	√2:the square root of 2
	~LT:is smaller than
	一群の:set of
	以外の:excluding
	1 未満:other than 1
	単独で:by itself
	一方は:one
	他方:the other
	大きい方:bigger one
	小さい方:smaller one
	のどちら先に:before or after
	沿う:along
	いずれかの:any of
	の上に:on top of／over
	もう無い:no further
	何〜か:several
	まず:first
	他の場合／さもなければ:otherwise
	それでも:still
	単~channel:single〜
	最も広い:largest
	最も近い:nearest
	次の:next
	複数の／何倍になるか:multiple
	以前の／:previous
	0 でない:non-zero
	もう一つ:second
	順に:one after the other
	先に~~現れる:earlier
	全体:the whole
	の下で:under
	同じ様に:just like
	指している:points to
	2 種の:two different 
	~group一体として:group as a whole
	箇所における:in place at the time when
	と同じく:as for
	ものすべて:everything
	ものはすべて／:anything
	図:figure
	図右:right
	図左:left
	図中央:middle
	に属し得る:potentially in
	部位:portion
	~~部位:part
	部分／各部:parts
	部分的:partly
	片:fragment／:piece
	とる／生じる:take
	ある:lie

●●images
＠css-masking/
	luminance-mask｜height:260px｜Example Mask｜.svg
cliprule-nonzero｜border: thin solid black; height: 4cm;｜＝Shape with nonzero rule.｜.svg
cliprule-evenodd｜border: thin solid black; height: 4cm;｜＝Shape with even-odd rule.｜.svg
mask-repeat｜height: 240px;｜＝Image of an element with a dotted mask.｜.svg
mask-box-image｜height: 240px;｜＝Example for 'mask-border'｜.svg
clip-1｜height:300px;｜｜clip.svg

●●ref_key_map
CSS3TRANSFORMS:CSSTRANSFORMS1
CSS3BG:CSSBACKGROUNDS3
CSS3VAL:CSSVALUES3
CSS3COLOR:CSSCOLOR3
CSSSHAPES:CSSSHAPES1
FILTEREFFECTS:FILTEREFFECTS1

●●ref_normative

[COMPOSITING-1]
    Rik Cabanier; Nikos Andronikos. ＜Compositing and Blending Level 1＞. URL: https://drafts.fxtf.org/compositing-1/
[CSS-BOX-4]
    Elika Etemad. ＜CSS Box Model Module Level 4＞. URL: https://drafts.csswg.org/css-box-4/
[CSS-BREAK-4]
    Rossen Atanassov; Elika Etemad. ＜CSS Fragmentation Module Level 4＞. URL: https://drafts.csswg.org/css-break-4/
[CSS-CASCADE-5]
    Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. ＜CSS Cascading and Inheritance Level 5＞. URL: https://drafts.csswg.org/css-cascade-5/
[CSS-COLOR-4]
    Tab Atkins Jr.; Chris Lilley; Lea Verou. ＜CSS Color Module Level 4＞. URL: https://drafts.csswg.org/css-color/
[CSS-DISPLAY-4]
    ＜CSS Display Module Level 4＞. Editor's Draft. URL: https://drafts.csswg.org/css-display-4/
[CSS-FONTS-4]
    John Daggett; Myles Maxfield; Chris Lilley. ＜CSS Fonts Module Level 4＞. URL: https://drafts.csswg.org/css-fonts-4/
[CSS-FONTS-5]
    Myles Maxfield; Chris Lilley. ＜CSS Fonts Module Level 5＞. URL: https://drafts.csswg.org/css-fonts-5/
[CSS-IMAGES-3]
    Tab Atkins Jr.; Elika Etemad; Lea Verou. ＜CSS Images Module Level 3＞. URL: https://drafts.csswg.org/css-images-3/
[CSS-INLINE-3]
    Dave Cramer; Elika Etemad. ＜CSS Inline Layout Module Level 3＞. URL: https://drafts.csswg.org/css-inline-3/
[CSS-OVERFLOW-3]
    Elika Etemad; Florian Rivoal. ＜CSS Overflow Module Level 3＞. URL: https://drafts.csswg.org/css-overflow-3/
[CSS-SHAPES]
    Rossen Atanassov; Alan Stearns. ＜CSS Shapes Module Level 1＞. URL: https://drafts.csswg.org/css-shapes/
[CSS-TEXT-4]
    Elika Etemad; et al. ＜CSS Text Module Level 4＞. URL: https://drafts.csswg.org/css-text-4/
[CSS-TEXT-DECOR-4]
    Elika Etemad; Koji Ishii. ＜CSS Text Decoration Module Level 4＞. URL: https://drafts.csswg.org/css-text-decor-4/
[CSS-UI-4]
    Florian Rivoal. ＜CSS Basic User Interface Module Level 4＞. URL: https://drafts.csswg.org/css-ui-4/
[CSS-VALUES-4]
    Tab Atkins Jr.; Elika Etemad. ＜CSS Values and Units Module Level 4＞. URL: https://drafts.csswg.org/css-values-4/
[CSS-WRITING-MODES-3]
    Elika Etemad; Koji Ishii. ＜CSS Writing Modes Level 3＞. URL: https://drafts.csswg.org/css-writing-modes-3/
[CSS-WRITING-MODES-4]
    Elika Etemad; Koji Ishii. ＜CSS Writing Modes Level 4＞. URL: https://drafts.csswg.org/css-writing-modes-4/
[CSS21]
    Bert Bos; et al. ＜Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification＞. URL: https://drafts.csswg.org/css2/
[CSS22]
    Bert Bos. ＜Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification＞. URL: https://drafts.csswg.org/css2/
[CSS3-TRANSFORMS]
    Simon Fraser; et al. ＜CSS Transforms Module Level 1＞. URL: https://drafts.csswg.org/css-transforms/
[CSS3BG]
    Elika Etemad; Brad Kemper. ＜CSS Backgrounds and Borders Module Level 3＞. URL: https://drafts.csswg.org/css-backgrounds/
[CSS3VAL]
    Tab Atkins Jr.; Elika Etemad. ＜CSS Values and Units Module Level 3＞. URL: https://drafts.csswg.org/css-values-3/
[FETCH]
    Anne van Kesteren. ＜Fetch Standard＞. Living Standard. URL: https://fetch.spec.whatwg.org/
[FILL-STROKE-3]
    Elika Etemad; Tab Atkins Jr.. ＜CSS Fill and Stroke Module Level 3＞. URL: https://drafts.fxtf.org/fill-stroke/
[FILTER-EFFECTS]
    Dirk Schulze; Dean Jackson. ＜Filter Effects Module Level 1＞. URL: https://drafts.fxtf.org/filter-effects-1/
[RFC2119]
    S. Bradner. ＜Key words for use in RFCs to Indicate Requirement Levels＞. March 1997. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119
[SVG-ANIMATIONS]
    ＜SVG Animations Level 2＞. Editor's Draft. URL: https://svgwg.org/specs/animations/
[SVG11]
    Erik Dahlström; et al. ＜Scalable Vector Graphics (SVG) 1.1 (Second Edition)＞. 16 August 2011. REC. URL: https://www.w3.org/TR/SVG11/
[SVG2]
    Amelia Bellamy-Royds; et al. ＜Scalable Vector Graphics (SVG) 2＞. URL: https://svgwg.org/svg2-draft/
[WEBIDL]
    Edgar Chen; Timothy Gu. ＜Web IDL Standard＞. Living Standard. URL: https://webidl.spec.whatwg.org/

●●ref_informative

[CSS3COLOR]
    Tantek Çelik; Chris Lilley; David Baron. ＜CSS Color Module Level 3＞. URL: https://drafts.csswg.org/css-color-3/


●●trans_metadata
<p>
~THIS_PAGEは、~W3Cにより編集者草案として公開された
<a href="~SPEC_URL">CSS Masking Module Level 1</a>
を日本語に翻訳したものです。
~PUB
</p>


●●spec_metadata

最新公表バージョン
	https://www.w3.org/TR/css-masking-1/
公表履歴
	https://www.w3.org/standards/history/css-masking-1/
実装報告
	https://test.csswg.org/harness/results/css-masking-1_dev/grouped/
テスト一式
	https://test.csswg.org/suites/css-masking/nightly-unstable/
フィードバック
	<a href="https://github.com/w3c/fxtf-drafts/labels/css-masking-1">GitHub Issues</a>

編集
	<a href="mailto:dschulze@adobe.com">Dirk Schulze</a> (Adobe Inc.)
	<a href="mailto:bbirtles@mozilla.com">Brian Birtles</a> (Mozilla Japan)
	<a href="https://www.xanthir.com/contact/">Tab Atkins Jr.</a> (Google)

Suggest an Edit for this Spec
	<a href="https://github.com/w3c/fxtf-drafts/blob/main/css-masking-1/Overview.bs">GitHub Editor</a>
commit 履歴
	https://github.com/w3c/fxtf-drafts/commits/main/css-masking-1

</script>

</head>
<body>

<template id="_persisted_parts">

<x-demobox
	id="_dgm-clipping-path-1"
	style="background-image: linear-gradient(90deg, #00F0, #00FF);"
>
</x-demobox>

<x-demobox
	id="_dgm-clipping-path-2"
>
<svg
	xmlns="http://www.w3.org/2000/svg"
	viewBox="0 0 190 190"
>
<path
	style="fill:none; stroke:black; stroke-width:1px"
	d="
M-1,-1 v192 h192 v-192z
M70,64 q2,48
  8, 8 t 8, 8 t 8, 8 t 8, 8 t 8, 8 t 8, 8
t-8, 8 t-8, 8 t-8, 8 t-8, 8 t-8, 8 t-8, 8
t-8,-8 t-8,-8 t-8,-8 t-8,-8 t-8,-8 t-8,-8
t 8,-8 t 8,-8 t 8,-8 t 8,-8 t 8,-8 t 8,-8
z
M140,90 q-2,-48
 -8,-8 t-8,-8 t-8,-8 t-8,-8
t 8,-8 t 8,-8 t 8,-8 t 8,-8
t 8, 8 t 8, 8 t 8, 8 t 8, 8
t-8, 8 t-8, 8 t-8, 8 t-8, 8
z
"/>
</svg>
</x-demobox>


<x-demobox
	id="_dgm-clipping-path-3"
	style="background-image: linear-gradient(90deg, #00F0, #00FF);"
>
<svg
	xmlns="http://www.w3.org/2000/svg"
	viewBox="0 0 190 190"
>
<path
	style="fill:#F0FFF0; fill-rule:evenodd;"
	d="
M-1,-1 v192 h192 v-192z
M70,64 q2,48
  8, 8 t 8, 8 t 8, 8 t 8, 8 t 8, 8 t 8, 8
t-8, 8 t-8, 8 t-8, 8 t-8, 8 t-8, 8 t-8, 8
t-8,-8 t-8,-8 t-8,-8 t-8,-8 t-8,-8 t-8,-8
t 8,-8 t 8,-8 t 8,-8 t 8,-8 t 8,-8 t 8,-8
z
M140,90 q-2,-48
 -8,-8 t-8,-8 t-8,-8 t-8,-8
t 8,-8 t 8,-8 t 8,-8 t 8,-8
t 8, 8 t 8, 8 t 8, 8 t 8, 8
t-8, 8 t-8, 8 t-8, 8 t-8, 8
z
"/>
</svg>
</x-demobox>


<x-demobox
	id="_dgm-luminance-mask-1"
	style="background: #00F"
>
</x-demobox>

<x-demobox
	id="_dgm-luminance-mask-2"
	style="background-image: linear-gradient(90deg, black, white);"
>
<svg
	xmlns="http://www.w3.org/2000/svg"
	viewBox="0 0 190 190"
>
<path
	style="fill-rule:evenodd;"
	d="
M-1,-1 v192 h192 v-192z
M70,64 q2,48
  8, 8 t 8, 8 t 8, 8 t 8, 8 t 8, 8 t 8, 8
t-8, 8 t-8, 8 t-8, 8 t-8, 8 t-8, 8 t-8, 8
t-8,-8 t-8,-8 t-8,-8 t-8,-8 t-8,-8 t-8,-8
t 8,-8 t 8,-8 t 8,-8 t 8,-8 t 8,-8 t 8,-8
z
M140,90 q-2,-48
 -8,-8 t-8,-8 t-8,-8 t-8,-8
t 8,-8 t 8,-8 t 8,-8 t 8,-8
t 8, 8 t 8, 8 t 8, 8 t 8, 8
t-8, 8 t-8, 8 t-8, 8 t-8, 8
z
"/>
</svg>
</x-demobox>


<x-demobox
	id="_dgm-luminance-mask-3"
	style="background-image: linear-gradient(90deg, #00F0, #00FF);"
>
<svg
	xmlns="http://www.w3.org/2000/svg"
	viewBox="0 0 190 190"
>
<path
	style="fill:#F0FFF0; fill-rule:evenodd;"
	d="
M-1,-1 v192 h192 v-192z
M70,64 q2,48
  8, 8 t 8, 8 t 8, 8 t 8, 8 t 8, 8 t 8, 8
t-8, 8 t-8, 8 t-8, 8 t-8, 8 t-8, 8 t-8, 8
t-8,-8 t-8,-8 t-8,-8 t-8,-8 t-8,-8 t-8,-8
t 8,-8 t 8,-8 t 8,-8 t 8,-8 t 8,-8 t 8,-8
z
M140,90 q-2,-48
 -8,-8 t-8,-8 t-8,-8 t-8,-8
t 8,-8 t 8,-8 t 8,-8 t 8,-8
t 8, 8 t 8, 8 t 8, 8 t 8, 8
t-8, 8 t-8, 8 t-8, 8 t-8, 8
z
"/>
</svg>
</x-demobox>

<svg
	id="_dgm-mask-source-destination-1"
	xmlns="http://www.w3.org/2000/svg"
	width="200" height="200"
	viewbox="0 0 200 200"
	class="ex-mask-composite"
>
<path
	transform="translate(25,25)"
	d="m0,0 h100 v100 h-100 v-100"
/>
</svg>

<svg
	id="_dgm-mask-source-destination-2"
	xmlns="http://www.w3.org/2000/svg"
	width="200" height="200"
	viewbox="0 0 200 200"
	class="ex-mask-composite"
>
<path
	transform="translate(25,25)"
	d="m100,50 a50,50 1 1 0 0,100 a50,50 0 0 0 0,-100"
/>
</svg>

<svg
	id="_dgm-mask-composite-add"
	xmlns="http://www.w3.org/2000/svg"
	width="200" height="200"
	viewbox="0 0 200 200"
	class="ex-mask-composite"
>
<path
	transform="translate(25,25)"
	d="m0,0 h100 v100 h-100 v-100"
/>
<path
	transform="translate(25,25)"
	d="m100,50 a50,50 1 1 0 0,100 a50,50 0 0 0 0,-100"
/>
</svg>

<svg
	id="_dgm-mask-composite-subtract"
	xmlns="http://www.w3.org/2000/svg"
	width="200" height="200"
	viewbox="0 0 200 200"
	class="ex-mask-composite"
>
<path
	transform="translate(25,25)"
	d="m100,50 a50,50 1 1 1 -50,50 h50 z"
/>
</svg>

<svg
	id="_dgm-mask-composite-intersect"
	xmlns="http://www.w3.org/2000/svg"
	width="200" height="200"
	viewbox="0 0 200 200"
	class="ex-mask-composite"
>
<path
	transform="translate(25,25)"
	d="m100,50 a50,50 0 0 0 -50,50 h50 z"
/>
</svg>

<svg
	id="_dgm-mask-composite-exclude"
	xmlns="http://www.w3.org/2000/svg"
	width="200" height="200"
	viewbox="0 0 200 200"
	class="ex-mask-composite"
>
<path
	transform="translate(25,25)"
	d="m0,0 h100 v100 h-100 v-100 m100,50 a50,50 1 1 0 0,100 a50,50 0 0 0 0,-100"
/>
</svg>


<svg
	id="_dgm-mask-composite-subtract-add-1"
	xmlns="http://www.w3.org/2000/svg"
	width="200" height="200"
	viewbox="0 0 200 200"
	class="ex-mask-composite"
>
<path
	transform="translate(25,25)"
	d="m75,-15 90,90 -90,90 -90,-90 z"
/>
</svg>

<svg
	id="_dgm-mask-composite-subtract-add-2"
	xmlns="http://www.w3.org/2000/svg"
	width="200" height="200"
	viewbox="0 0 200 200"
	class="ex-mask-composite"
>
<defs>
	<clipPath id="clip">
<path d="m75,-15 90,90 -90,90 -90,-90 z"/>
	</clipPath>
</defs>

<g
	transform="translate(25,25)"
	clip-path="url(#clip)"
>
<path d="m0,0 h100 v100 h-100 v-100" />
<path d="m100,50 a50,50 1 1 0 0,100 a50,50 0 0 0 0,-100" />
</g>
</svg>

<svg
	aria-describedby="_dgm-mask-box-image-mask"
	xmlns="http://www.w3.org/2000/svg"
	viewbox="0 0 240 250"
	style="height: 250px;"
>
<desc>pieces of a mask border image</desc>
<defs>
	<filter id="filter" filterUnits="userSpaceOnUse" x="0" y="0" width="240" height="240">
<feGaussianBlur stdDeviation="10"/>
	</filter>
</defs>
<rect width="240" height="250" style="fill:white"/>

<rect x="20" y="20" width="200" height="200" style="fill:black;filter:url(#filter)"/>
<path stroke="red" stroke-width="1.5" d="M75,0 v240 M165,0 v240 M0,75 h240 M0,165 h240"/>
</svg>

</template>

<header>
	<hgroup>
<h1>CSS Masking Module Level 1</h1>
	</hgroup>
</header>

<div id="MAIN" hidden>

	<section id="abstract">
◎要約

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

<ul>
	<li>
~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.
</li>
	<li>
切抜きは、
視覚的な要素の可視になる領域を述べる。
領域は、
一定の［
~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.
</li>
</ul>

	</section>
	<section id="sotd">
◎位置付け

<p>
これは、
編集者草案の公な複製です…
【以下、この節の内容は，~SOTD-CSSに移譲。】
</p>

	</section>

<main id="MAIN0">

	<section id="intro">
<h2 title="Introduction">1. 序論</h2>

◎非規範的

<p>
この仕様は、
2 種の~graphicな演算
— 切抜きと~masking —
を定義する。
両者とも，ある~objの部位を［
全部的／部分的
］に隠す。
◎
This specification defines two different graphical operations which both fully or partly hide portions of an object: clipping and masking.
</p>

		<section id="clipping">
<h3 title="Clipping">1.1. 切抜き</h3>

<p>
いわゆる
`切抜き~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.
</p>

<div class="example">
<figure>
<div class="ex-demo">
	<div>
`clipping-path-1^dgm
~obj
</div>
	<div>
`clipping-path-2^dgm
切抜き~path
</div>
	<div>
`clipping-path-3^dgm
切抜かれた~obj
</div>
</div>

<figcaption>
切抜き~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).
</figcaption></figure>
</div>

<p>
`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.
</p>

		</section>
		<section id="masking">
<h3 title="Masking">1.2. ~masking</h3>

<p>
~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.
</p>

<div class="example">
<figure>
<div class="ex-demo">
	<div>
`luminance-mask-1^dgm
~obj
</div>
	<div>
`luminance-mask-2^dgm
輝度~mask
</div>
	<div>
`luminance-mask-3^dgm
~maskされた~obj
</div>
</div>

<figcaption>
輝度~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).
</figcaption></figure>
</div>

<p>
~maskは、［
`mask-image$p ／ `mask-border-source$p
］~propを利用して適用される。
◎
Masks are applied using the mask-image or mask-border-source properties.
</p>

<p>
`mask-image$p ~propは：
◎
↓</p>

<ul>
	<li>
`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.
</li>
	<li>
あるいは、
~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.
</li>
</ul>

<p>
`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.
</p>

<p>
`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.
</p>

<p class="note">注記：
~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.
</p>

		</section>
	</section>
	<section id="placement">
<h2 title="Module interactions">2. ~module間の相互作用</h2>

<p>
この仕様は、
一群の~CSS~propを定義する。
それらは、
それらが適用される要素の視覚的な描画に影響する。
これらの効果は、［
`CSS21$r
`§ 視覚-整形~model＠~CSS2J#visuren$
に則って，要素が~sizeされ, 位置された後
］に適用される。
これらの~propがとる一部の値は、
`積層~文脈$を作成させる。
加えて，この仕様は、
`CSS21$r による
<a href="~CSS22/visufx.html#clipping">§ 切抜き： `clip^p ~prop</a>
を置換する。
◎
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].
</p>

<div class="p">
<p>
組成ng~modelは、
~SVG組成ng~model `SVG11$r に従う：
</p>
<ol>
	<li>
要素は、
まず［
~filter効果 `FILTER-EFFECTS$r, 切抜き, ~masking, 不透明度
］が無い下で~styleされる。
</li>
	<li>
要素とその子孫は、
一時的な~canvas上に描かれる。
</li>
	<li>
最後に、
最初の項に挙げた効果が，挙げられた順に要素に適用される。
</li>
</ol>
◎
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.
</div>

<p>
この仕様は、
`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].
</p>

<p>
用語 `~obj限界~box$は、
`SVG11$r における定義に従うとする。
◎
The term object bounding box follows the definition in SVG 1.1 [SVG11].
</p>

<p class="trans-note">【
この訳では、
`SVG11$r を参照していた一部の~SVG用語の参照-先を `SVG2$r に違えている。
】</p>

	</section>
	<section id="values">
<h2 title="Values">3. 値</h2>

<p>
`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.
</p>

<p class="trans-note">【
この節の他の内容は
`~CSS日本語訳 共通~page＠~CSScommon#values$
に移譲。
】</p>

	</section>
	<section id="terminology">
<h2 title="Terminology">4. 各種用語</h2>

<p>
この仕様における各種 ~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:
</p>
<div >

<table class="data" id="term-matching">
<caption>【括弧内は対応する~prop（訳者補足）】</caption>
<thead>
<tr><th>この仕様における用語
<th>`CSS3BG$r における用語
<tbody>

<tr><th>`~mask層~画像$（ `mask-image$p ）
<td>背景~画像（ `background-image$p ）

<tr><th>`~mask塗ng区画$（ `mask-clip$p ）
<td>`背景~塗ng区画$（ `background-clip$p ）

<tr><th><dfn id="mask-size">~mask~size</dfn>（ `mask-size$p ）
<td>背景~size（ `background-size$p ）

<tr><th><dfn id="mask-position">~mask位置</dfn>（ `mask-position$p ）
<td>背景~位置（ `background-position$p ）

<tr><th>`~mask位置決め区画$（ `mask-origin$p ）
<td>`背景~位置決め区画$（ `background-origin$p ）

<tr><th>`~mask~border画像$（ `mask-border-source$p ）
<td>~border画像（ `border-image-source$p ）

<tr><th>`~mask~border画像~区画$（ `mask-border-width$p, `mask-border-outset$p ）
<td>`~border画像~区画$（ `border-image-width$p, `border-image-outset$p ）
</table>

◎
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
</div>

		<section id="_box-keywords">
<h3>4.1. ~keywordによる基準~box</h3>

<p class="trans-note">【
この節は、
他所の記述を集約するための，この訳による追加。
】</p>

<p>
この仕様が定義するいくつかの~propは［
`coord-box$t ／ `geometry-box$t
］型の値をとる：
</p>

<p>
そのような~keyword値による効果は、
その使用~値†に応じて，以下に与える
`~keywordによる基準~box@
に基づく：
</p>

<p class="note">注記†：
これらの基準~boxは、
当の要素において常に定義されるとは限らない
— 例えば， `shape-box$t 値による基準~boxは、
~SVGの描画~文脈においては定義されず，他の値は~CSS~layout文脈においては定義されない。
そのような場合、
使用~値として，他の~keyword値に対応付けられてから解釈されることになる
— どの値に対応付けられるかは、
個々の~propごとに定義される。
</p>

<dl class="valdef">
	<dt>`content-box@v</dt>
	<dd>
要素の内容~box。
</dd>

	<dt>`padding-box@v</dt>
	<dd>
要素の~padding~box。
</dd>

	<dt>`border-box@v</dt>
	<dd>
要素の~border~box。
</dd>

	<dt>`margin-box@v</dt>
	<dd>
要素の~margin~box。
</dd>

	<dt>`fill-box@v</dt>
	<dd>
要素の`~obj限界~box$。
</dd>

	<dt>`stroke-box@v</dt>
	<dd>
要素の`~stroke限界~box$。
</dd>

	<dt>`view-box@v</dt>
	<dd>
<p>
要素に最も近い`~SVG表示域$が成す~box
— `~SVG表示域$を作成している要素~用に `viewBox$a 属性が指定されているならば：
</p>
		<ul>
			<li>
~boxの位置は、
`viewBox^a 属性により確立される座標系の原点になる。
</li>
			<li>
~boxの寸法は、
`viewBox^a 属性が与える横幅, 縦幅（
`width^t, `height^t
）値で与えられる。
</li>
		</ul>

【 `viewBox^a が指定されていない場合にどうなるかは、述べられていない。】
	</dd>
</dl>

		</section>

	</section>
	<section id="clipping-paths">
<h2 title="Clipping Paths">5. 切抜き~path</h2>

<p>
切抜き~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.
</p>

<p>
要素の先祖も、
要素の内容のある部位を切抜くこともある（例えば、
自前の［
`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.
</p>

<p>
切抜き領域が~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.
</p>

<p>
切抜き~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.
</p>

<div class="example">
<p>
ある図形（ `path$e ）を考える
— 図形は、
先祖に適用された切抜き~pathにより切抜かれていて：
◎
Consider a shape that is clipped by a clipping path applied to an ancestor:
</p>

<pre class="lang-xml">
&lt;g clip-path="circle()"&gt;
  &lt;path id="shape" d="M0,0 L10,10, L 20,0 z"/&gt;
&lt;/g&gt;
</pre>

<p>
図形は、
`use$e 要素により参照されているとする：
◎
The shape is referenced by a use element:
</p>

<pre class="lang-xml">
&lt;use xlink:href="#shape"/&gt;
</pre>

<p>
この図形が成す幾何に，真円な（ `circle$f ）切抜き~pathが波及することはない。
◎
The geometry of the shape is not influenced by the circular clipping path.
</p>
</div>

<p>
既定では、
図形の切取られた（可視でない）領域に対しては，
`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.
</p>

		<section id="the-clip-path">
<h3 title="Clipping Shape: the clip-path property">5.1. 切抜き図形： `clip-path^p ~prop</h3>

◎名 `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 &lt;url&gt; values made absolute
◎順 文法に従う
◎ア 算出d値の型による
【 `basic-shape$t については、`基本~図形の補間＠~CSSSHAPES#basic-shape-interpolation$も見よ。】
◎表終

<p>
基本~図形を指定するか, または `clipPath$e 要素を参照して，`切抜き~path$を作成する。
◎
Specifies a basic shape or references a clipPath element to create a clipping path.
</p>

<pre class="prod">
`clip-source@t
	= `url$t

`geometry-box@t
	= `shape-box$t
	| `fill-box$v
	| `stroke-box$v
	| `view-box$v
</pre>

<dl class="valdef">
	<dt>`clip-source$t</dt>
	<dd>
`切抜き~path$を `clipPath$e 要素への~URL参照として与える。
</dd>

	<dt>`basic-shape$t</dt>
	<dd>
`切抜き~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.
</dd>

	<dt>`geometry-box$t</dt>
	<dd>
<p>
指定された`~keywordによる基準~box$は：
</p>
		<ul>
			<li>
`basic-shape$t と併せて指定された場合には、
`basic-shape$t 用の基準~boxを供する。
</li>
			<li>
単独で指定された場合には、
その~boxを成す辺が`切抜き~path$として利用される
— 隅の形状付け（例： `border-radius$p `CSS3BG$r により定義されるものなど）があれば，それらも含めて。
`~box値による図形＠~CSSSHAPES#shapes-from-box-values$ `CSS-SHAPES$r
も見よ。
</li>
		</ul>

◎
If specified in combination with a &lt;basic-shape&gt; it provides the reference box for the &lt;basic-shape&gt;.
◎
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.
</dd>

	<dt>`none^v</dt>
	<dd>
`切抜き~path$は作成されない。
◎
No clipping path gets created.
</dd>
</dl>

<p>
`geometry-box$t 値に対する`使用~値$は：
◎
↓</p>

<ul>
	<li>
~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.
</li>
	<li>
~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.
</li>
</ul>

<p>
算出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.
</p>

<p>
~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.
</p>

<div class="example">
<p>
この例は、
基本~図形 `polygon$f の切抜き~pathとしての利用をデモる。
各［
~spaceで分離された長さ~pair
］は、
多角形の ある頂点を表現する。
`§ 序論＠#clipping$にて可視化された切抜き~pathを見れる。
◎
This example demonstrates the use of the basic shape &lt;polygon()&gt; as clipping path. Each space separated length pair represents one point of the polygon. The visualized clipping path can be seen in the introduction.
</p>

<pre class="lang-css">
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);
</pre>
</div>

<div class="example">
<p>
この例では、
`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.
</p>

<pre class="lang-css">
clip-path: url("#clip1");
</pre>

<pre class="lang-xml">
&lt;clipPath id="clip1"&gt;
    &lt;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"/&gt;
&lt;/clipPath&gt;
</pre>
</div>

<p>
`clip-path$p ~propは、
~SVG要素~用の`呈示~属性$である。
◎
The clip-path property is a presentation attribute for SVG elements.
</p>

		</section>
	</section>
	<section id="svg-clipping-paths">
<h2 title="SVG Clipping Path Sources">6. ~SVGによる切抜き~path~source</h2>

		<section id="ClipPathElement">
<h3 title="The clipPath element">6.1. `clipPath^e 要素</h3>

◎要素名 `clipPath@e
◎分類
`容器~要素$／`決して描画されない要素$
◎
container elements, never-rendered element
◎内容
任意個数, 任意順序の，次に挙げる要素
⇒＃
`記述的~要素$,
`~animation要素$,
`図形~要素$,
`text$e,
`use$e,
`script$e
◎属性
`条件付き処理~属性$,
`中核~属性$,
`呈示~属性$,
`class$a,
`style$a,
`externalResourcesRequired$a,
`transform$a,
`clipPathUnits$a
◎界面 `SVGClipPathElement$I
◎表終

属性定義

<dl class="valdef">
	<dt>`clipPathUnits@a = "`userSpaceOnUse$vCPU | `objectBoundingBox$vCPU"</dt>
	<dd>
<p>
`clipPath$e 要素の内容~用の`利用元~座標系$を定義する。
`clip-path$p ~propを介してこの要素を参照している要素（すなわち，この要素が定義する切抜き~pathが適用される要素）を %E で表すとき、
この座標系は，指定された値に応じて 次で与えられる：
◎
Defines the coordinate system for the contents of the clipPath.
</p>
		<dl class="switch">
			<dt>`userSpaceOnUse@vCPU</dt>
			<dd>
%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).
</dd>

			<dt>`objectBoundingBox@vCPU</dt>
			<dd>
座標［
(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.
</dd>
		</dl>
	</dd>
	<dd>
`clipPathUnits$a 属性が指定されていない場合の効果は、
値 `userSpaceOnUse$vCPU が指定されていたかのようになる。
◎
If attribute clipPathUnits is not specified, then the effect is as if a value of userSpaceOnUse were specified.
</dd>
	<dd>
~animate可能。
◎
Animatable: yes.
</dd>
</dl>

<p>
`clipPath$e 要素は、
先祖から~CSS~propを継承するが，それを参照している要素からは<em>継承しない</em>。
◎
CSS properties inherit into the clipPath element from its ancestors; properties do not inherit from the element referencing the clipPath element.
</p>

<p>
`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.
</p>

<p>
`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.
</p>

<p class="issue">
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]
</p>

<div class="p">
<p>
`clipPath$e 要素の中では、
各~子~要素†が成す生の幾何††が、
要素が表現する`切抜き~path$を定義し，概念的な 1-bit ~maskを定義する†††。
それは、
`clipPath^e 要素に結付けられた~graphicたちが成す “影絵” を表現する。
~objの［
それらの幾何の外側にある部分
］は、
すべて~maskされて除かれる。
子~要素たちが成す影絵を~~合併して（ “bit-OR” ）得られる単独の影絵が，塗りを適用できる領域を制約するために利用される。
したがって，所与の地点は、
`clipPath$e のいずれかの子の内側にあるならば、
切抜き~pathの内側にある。
</p>

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

◎
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.
</div>

<p class="issue">
生の幾何に影響する~CSS~propについて定義する。
とりわけ~text上の。
（`170$issue）
◎
Define raw geometry with regards to CSS properties that affect it. Especially on text. [Issue #170]
</p>

<p>
所与の`~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])
</p>

<p>
加えて：
◎
A couple of additions:
</p>

<ul>
	<li>
`clipPath$e 要素の先祖の切抜き~pathが，
`clipPath$e 要素やその子~要素に継承される<em>ことはない</em>。
◎
The clipPath element itself and its child elements do not inherit clipping paths from the ancestors of the clipPath element.
</li>
	<li>
<p>
`clipPath$e 要素や その子~要素には `clip-path$p ~propを指定できる：
</p>
		<ul>
			<li>
妥当な `clip-path$p 参照が `clipPath$e 要素に設置された場合、
結果の切抜き~pathは，［
`clipPath$e 要素の内容が成す切抜き~pathと参照-先のそれとの交差域になる。
</li>
			<li>
妥当な `clip-path$p 参照が `clipPath$e 要素の子に設置された場合、
その子~要素は，他の影絵と~~合併される前に，参照-先の切抜き~pathで切抜かれる。
</li>
		</ul>
◎
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.
</li>
	<li>
切抜き~pathが空な場合【内容が空な `clipPath$e 要素など】、
`clip-path$p ~propが適用される要素は完全に切抜かれて~~消えることになる。
◎
An empty clipping path will completely clip away the element that had the clip-path property applied.
</li>
</ul>

		</section>
		<section id="the-clip-rule">
<h3 title="Winding Rules: the clip-rule property">6.2. 巻数~規則： `clip-rule^p ~prop</h3>

◎名 `clip-rule@p
◎値 `nonzero$v | `evenodd$v
◎初 `nonzero^v
◎適 
~SVG`~graphics要素$
◎
Applies to SVG graphics elements
◎継 される
◎百 受容しない
◎算 指定されたとおり
◎順 文法に従う
◎ア 離散的
◎表終

<p>
`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].
</p>

<dl class="valdef">
	<dt>`nonzero@v</dt>
	<dd>
`fill-rule$p ~propの記述を見よ。
【！`SVG11$r】
◎
See description of fill-rule property [SVG11].
</dd>

	<dt>`evenodd@v</dt>
	<dd>
`fill-rule$p ~propの記述を見よ。
【！`SVG11$r】
◎
See description of fill-rule property [SVG11].
</dd>
</dl>

<p>
`clip-rule$p ~propは、
`clipPath$e 要素の中に包含されている`~graphics要素$のみに適用される。
◎
The clip-rule property only applies to graphics elements that are contained within a clipPath element.
</p>

<p class="note">注記：
`clip-rule$p ~propは
`basic-shape$t には適用されない。
◎
Note: The clip-rule property does not apply to &lt;basic-shape&gt;s.
</p>

<div class="example">
<p>
`nonzero$v 規則を示す絵図：
◎
The following drawing illustrates the nonzero rule:
</p>

<figure>
<figcaption id="_dgm-cliprule-nonzero">
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".
</figcaption></figure>
</div>

<div class="example">
<p>
`evenodd$v 規則を示す絵図:
◎
The following drawing illustrates the evenodd rule:
</p>

<figure>
<figcaption id="_dgm-cliprule-evenodd">
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".
</figcaption></figure>
</div>

<div class="example">
<p>
次の~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:
</p>
<pre class="lang-xml">
&lt;g clip-rule="nonzero"&gt;
  &lt;clipPath id="MyClip"&gt;
    &lt;path d="..." clip-rule="evenodd" /&gt;
  &lt;/clipPath&gt;
  &lt;rect clip-path="url(#MyClip)" ... /&gt;
&lt;/g&gt;
</pre>

<p>
一方で，次の~code片では、
`even-odd^en 切抜き規則は<em>適用されない</em>ことになる
— `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:
</p>

<pre class="lang-xml">
&lt;g clip-rule="nonzero"&gt;
  &lt;clipPath id="MyClip"&gt;
    &lt;path d="..." /&gt;
  &lt;/clipPath&gt;
  &lt;rect clip-path="url(#MyClip)" clip-rule="evenodd" ... /&gt;
&lt;/g&gt;
</pre>
</div>

<p>
`clip-rule$p
~propは、
~SVG要素~用の`呈示~属性$である。
◎
The clip-rule property is a presentation attribute for SVG elements.
</p>

		</section>
	</section>
	<section id="positioned-masks">
<h2 title="Positioned Masks">7. ~mask</h2>

		<section id="the-mask-image">
<h3 title="Mask Image Source: the mask-image property">7.1. ~mask画像~source： `mask-image^p ~prop</h3>

◎名 `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 &lt;image&gt;, or a computed &lt;url&gt;
◎順 文法に従う
◎ア 離散的
◎表終

<p>
この~propは、
要素の
`~mask層~画像@
を設定する。
◎
This property sets the mask layer image of an element. Where:
</p>

<pre class="prod">
`mask-reference@t
	= `none^v
	| `image$t
	| `mask-source$t
`mask-source@t
	= `url$t
</pre>

<dl class="valdef">
	<dt id="valdef-mask-image-url">`url$t</dt>
	<dd>
［
`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.
</dd>

	<dt>`none^v</dt>
	<dd>
透明な黒の画像~層として数えられるようになる。
◎
A value of none counts as a transparent black image layer.
</dd>
</dl>

<p>
算出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.
</p>

<p>
次に該当する~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.
</p>

<p>
`~mask層~画像$を処理する方法については、
`~maskの処理-法$secを見よ。
◎
See the section “Mask processing” for how to process a mask layer image.
</p>

<p class="note">注記：
`mask-reference$t が成す~list内の値 `none^v は、
`mask-composite$p に指定される 利用される組成ng演算子に依存して，~masking演算に波及し得る。
◎
Note: A value of none in a list of &lt;mask-reference&gt;s may influence the masking operation depending on the used compositing operator specified by mask-composite.
</p>

<p class="note">注記：
`mask-source$t は、
~mask層として数えられ、
繰返可能な `mask-reference$t ~list内で
`image$t や更なる `mask-source$t ~list~itemと組合できる。
◎
Note: A &lt;mask-source&gt; counts as mask layer and can be combined in a repeatable &lt;mask-reference&gt; list with &lt;image&gt; or further &lt;mask-source&gt; list items.
</p>

<p class="note">注記：
要素は、
`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.
</p>

<div class="example">
<p>
~mask参照の例：
◎
Examples for mask references:
</p>

<pre class="lang-css">
body { mask-image: linear-gradient(black 0%, transparent 100%) }
p { mask-image: none }
div { mask-image: url(resources.svg#mask2) }
</pre>
</div>

<p>
`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.
</p>

		</section>
		<section id="the-mask-mode">
<h3 title="Mask Image Interpretation: the mask-mode property">7.2. ~mask画像の解釈： `mask-mode^p ~prop</h3>

◎名 `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
◎継 されない
◎百 受容しない
◎算 指定されたとおり
◎順 文法に従う
◎ア 離散的
◎表終

<p>
`mask-mode$p ~propは、
`mask-reference$t を［
輝度~mask, ~alpha~mask
］のどちらに扱うかを指示する（`~maskの処理-法$secを見よ）。
◎
The mask-mode property indicates whether the &lt;mask-reference&gt; is treated as luminance mask or alpha mask. (See Mask processing.)
</p>

<pre class="prod">
`masking-mode@t
	= alpha
	| luminance
	| match-source
</pre>

<p>
各種 値の意味は：
◎
Values have the following meanings:
</p>

<dl class="valdef">
	<dt>`alpha@v</dt>
	<dd>
`~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.
</dd>

	<dt>`luminance@v</dt>
	<dd>
`~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.
</dd>

	<dt>`match-source@v</dt>
	<dd>
<p>
`mask-image$p ~propの `mask-reference$t に応じて：
</p>
		<ul>
			<li>
`mask-source$t 型である場合、
参照先の `mask$e 要素の `mask-type$p ~propに指定された値を利用するモノトスル。
</li>
			<li>
`image$t 型である場合、
`~mask層~画像$の~alpha値が~mask値として利用されるべきである。
</li>
		</ul>
◎
If the &lt;mask-reference&gt; of the mask-image property is of type &lt;mask-source&gt; the value specified by the referenced mask element’s mask-type property must be used.
◎
If the &lt;mask-reference&gt; of the mask-image property is of type &lt;image&gt; the alpha values of the mask layer image should be used as the mask values.
</dd>
</dl>

<div class="example">
<p>
次の例では、
`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.
</p>

<p>
`mask-mode$p ~propは、
`mask-border-source$p の~masking~modeには影響しないモノトスル。
◎
The mask-mode property must not affect the masking mode of mask-border-source.
</p>

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

&lt;style&gt;
  rect {
    mask-image: url(#SVGMask);
    mask-mode: luminance;
  }
&lt;/style&gt;

&lt;rect width="200" height="200" fill="green"/&gt;
</pre>
</div>

<p>
`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.
</p>

		</section>
		<section id="the-mask-repeat">
<h3 title="Tiling Mask Images: the mask-repeat property">7.3. ~mask画像の敷詰法： `mask-repeat^p ~prop</h3>

◎名 `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
◎順 文法に従う
◎ア 離散的
◎表終

<p>
各`~mask層~画像$が
`~sizeされ＠#the-mask-size$,
`位置された＠#the-mask-position$
後に敷詰められる方法を指定する。
◎
Specifies how mask layer images are tiled after they have been sized and positioned.
</p>

<p>
値の定義については、
`background-repeat$p ~propを見よ。
`CSS3BG$r
◎
See background-repeat property [CSS3BG] for the definitions of the property values.
</p>

<div class="example">
<pre class="lang-css">
body {
    background-color: blue;
    mask-image: url(dot-mask.png) luminance;
    mask-repeat: space;
}
</pre>

<figure>
<figcaption id="_dgm-mask-repeat">
`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.
</figcaption></figure>
</div>

<p>
`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.
</p>

		</section>
		<section id="the-mask-position">
<h3 title="Positioning Mask Images: the mask-position property">7.4. ~mask画像の位置決め： `mask-position^p ~prop</h3>

◎名 `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 &lt;length&gt;), otherwise as a percentage.
◎順 文法に従う
◎ア 繰返可能な~list
◎表終

<p>
各種 値の定義については、
`background-position$p ~propを見よ。
`CSS3BG$r。
◎
See the background-position property [CSS3BG] for the definitions of the property values.
</p>

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

<pre class="lang-css">
body {
    mask-image: url("logo.png");
    mask-position: 100% 100%;
    mask-repeat: no-repeat;
}
</pre>
</div>

<div class="example">
<p>
~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:
</p>

<pre class="lang-css">
mask-position: right 3em bottom 10px
</pre>
</div>

<p>
`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.
</p>

		</section>
		<section id="the-mask-clip">
<h3 title="Masking Area: the mask-clip property">7.5. ~masking区画： `mask-clip^p ~prop</h3>

◎名 `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
◎継 されない
◎百 受容しない
◎算 指定されたとおり
◎順 文法に従う
◎ア 離散的
◎表終

<p>
`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.
</p>

<p>
`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.
</p>

<p>
各種 値の意味は：
◎
Values have the following meanings:
</p>

<dl class="valdef">
	<dt>`coord-box$t</dt>
	<dd>
塗られる内容は、
指定された`~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.
</dd>

	<dt>`no-clip@v</dt>
	<dd>
塗られる内容は、
制約されない（切抜かれない）。
◎
The painted content is not restricted (not clipped).
</dd>
</dl>

<p>
`coord-box$t 値に対する`使用~値$は：
◎
↓</p>

<ul>
	<li>
~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.
</li>
	<li>
~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.
</li>
</ul>

<p>
`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.
</p>

		</section>
		<section id="the-mask-origin">
<h3 title="Positioning Area: the mask-origin property">7.6. 位置決め区画： `mask-origin^p ~prop</h3>

◎名 `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
◎継 されない
◎百 受容しない
◎算 指定されたとおり
◎順 文法に従う
◎ア 離散的
◎表終

<p>
単独の~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.
</p>

<dl class="valdef">
	<dt>`coord-box$t</dt>
	<dd>
位置は、
指定された`~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.
</dd>
</dl>

<p>
`coord-box$t 値に対する`使用~値$†は：
◎
↓</p>
<ul>
	<li>
~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.
</li>
	<li>
~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.
</li>
</ul>

<p class="trans-note">【†
原文には “算出される” としか述べられていないが、
算出d値と解釈すると~prop定義~表tの “算出d値” の欄に反することに加え，
他所の記述とも一貫でないので、
使用~値と解釈する他にないであろう。
】</p>

<p class="note">注記：
`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.
</p>

<p class="note">注記：
`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.
</p>

<p>
`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.
</p>

		</section>
		<section id="the-mask-size">
<h3 title="Sizing Mask Images: the mask-size property">7.7. ~mask画像の~sizing： `mask-size^p ~prop</h3>

◎名 `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
◎表終

<p>
`~mask層~画像$の~sizeを指定する。
◎
Specifies the size of the mask layer images.
</p>

<p>
各種 値の定義については、
`background-size$p ~propを見よ。
`CSS3BG$r。
◎
See background-size property [CSS3BG] for the definitions of the property values.
</p>

<p>
`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.
</p>

		</section>
		<section id="the-mask-composite">
<h3 title="Compositing mask layers: the mask-composite property">7.8. ~mask層の組成-法： `mask-composite^p ~prop</h3>

◎名 `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
◎継 されない
◎百 受容しない
◎算 指定されたとおり
◎順 文法に従う
◎ア 離散的
◎表終

<pre class="prod">
`compositing-operator@t
	= `add$v
	| `subtract$v
	| `intersect$v
	| `exclude$v
</pre>

<p>
各~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.
</p>

<p>
以下においては、
`~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.
</p>

<dl class="valdef">
	<dt>`add@v</dt>
	<dd>
`~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.)
</dd>

	<dt>`subtract@v</dt>
	<dd>
`~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.)
</dd>

	<dt>`intersect@v</dt>
	<dd>
`~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 .)
</dd>

	<dt>`exclude@v</dt>
	<dd>
`~source$と`~dest$とが重合しない領域が組合される。
（~Porter-Duff組成ng演算子 `xor$v を見よ）。
◎
The non-overlapping regions of source and destination are combined. (See Porter-Duff compositing operator XOR.)
</dd>
</dl>

<p>
更なる~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.
</p>

<p class="trans-note">【†
すなわち，`~dest$が無い場合
— 言い換えれば、
対応する`~mask層~画像$は `mask-image$p ~propの値を成す最後の `mask-reference$t である場合。
】</p>

<p>
現在の~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.
</p>

<div class="example">
<p>
以下の例では、
次の 2 つの`~mask層~画像$
`rect.svg^c, `circle.svg^c
が利用される
【図の黒は、~mask値 1 を表す】：
◎
This example uses two mask layer images: circle.svg and rect.svg.
</p>

<figure>
`mask-source-destination-1^dgm
`mask-source-destination-2^dgm
【！＊alt="Example of source-over compositing of mask layers"（他も同じ）】
</figure>

<p>
両`~mask層~画像$とも， `mask-image$p ~propから参照される：
◎
Both mask layer images are references with the mask-image property:
</p>

<pre class="lang-css">
mask-image: circle.svg, rect.svg;
</pre>

<p>
~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.
</p>

<p>
`mask-composite$p ~propにより、
作者は異なる仕方を選んで複数の~mask層を組合できる。
◎
With the property mask-composite the author may choose different ways to combine multiple mask layers.
</p>

<ul>
	<li>
<p>
`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.
</p>

<pre class="lang-css">
mask-composite: add;
</pre>

<figure>
`mask-composite-add^dgm
</figure>

	</li>
	<li>
<p>
`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.
</p>

<pre class="lang-css">
mask-composite: subtract;
</pre>

<figure>
`mask-composite-subtract^dgm
</figure>
</li>
	<li>
<p>
`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.
</p>

<pre class="lang-css">
mask-composite: intersect;
</pre>

<figure>`mask-composite-intersect^dgm
</figure>
</li>
	<li>
<p>
`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.
</p>

<pre class="lang-css">
mask-composite: exclude;
</pre>

<figure>
`mask-composite-exclude^dgm
</figure>
</li>
	</ul>
</div>

<div class="example">
<p>
次の例は、
2 個の~mask層と 2 個の組成ng演算子を指定する。
◎
The following example specifies two mask layers and two compositing operators.
</p>
<pre class="lang-css">
mask-image: rect.svg, circle.svg;
mask-composite: add, exclude;
</pre>

<p>
`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.
</p>
</div>

<div class="example">
<p>
異なる組成ng演算子を伴う 3 個の ~mask層の例：
◎
This is an example of 3 mask layers with different compositing operators.
</p>
<pre class="lang-css">
mask-image: trapeze.svg, circle.svg, rect.svg;
mask-composite: subtract, add;
</pre>

<p>
まず，
`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.
</p>

<figure>
`mask-composite-subtract-add-1^dgm
`mask-composite-subtract-add-2^dgm
</figure>
</div>

<p>
`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.
</p>

		</section>
		<section id="the-mask">
<h3 title="Mask Shorthand: the mask property">7.9. ~mask略式： `mask^p ~prop</h3>

◎名 `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を見よ
◎表終

<pre class="prod">
`mask-layer@t
	= `mask-reference$t
	|| `position$t [ / `bg-size$t ]?
	|| `repeat-style$t
	|| `geometry-box$t
	|| [ `geometry-box$t | no-clip ]
	|| `compositing-operator$t
	|| `masking-mode$t
</pre>

<div>
<p>
`mask-layer$t 値を成す各~成分は、
在るならば，次の~~対応関係の下で 各種 `mask-*^p 下位propを設定する：
</p>

<table><thead>
<tr><th>~prop
<th>成分
<tbody>

<tr><td>`mask-image$p
<td>`mask-reference^t
<tr><td>`mask-position$p
<td>`position^t
<tr><td>`mask-size$p
<td>`bg-size^t
<tr><td>`mask-repeat$p
<td>`repeat-style^t
<tr><td>`mask-origin$p
<td>1 個目の `geometry-box^t
<tr><td>`mask-clip$p
<td>2 個目の `geometry-box^t, または `no-clip$v
— ただし，どちらも無い場合は 1 個目の `geometry-box^t （それが `mask-origin^p, `mask-clip^p とも設定する）。
<tr><td>`mask-composite$p
<td>`compositing-operator^t
<tr><td>`mask-mode$p
<td>`masking-mode^t
</table>

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

<p>
`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 &lt;mask-reference&gt; references a mask element. In this case the element defines position, sizing and clipping of the mask layer image.
</p>

<p>
`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.
</p>

		</section>
		<section id="the-mask-image-rendering-model">
<h3 title="The Mask Image Rendering Model">7.10. ~mask画像~描画~model</h3>

<p>
~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.
</p>

<p>
`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.
</p>

<p>
`mask$p ~propは、
~SVG要素~用の`呈示~属性$である。
◎
The mask property is a presentation attribute for SVG elements.
</p>

			<section id="MaskValues">
<h4 title="Mask processing">7.10.1. ~maskの処理-法</h4>

<p>
以下における
`~mask画像@
は、［
`~mask層~画像$／`~mask~border画像$
］の総称を表す。
◎
In the following section, mask image refers either to a mask layer image or to a mask border image.
</p>

<p>
~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.
</p>

<dl>
	<dt>
（単純に）`~mask画像$の~alpha~channelを利用する：
◎
The first and simplest method of calculating the mask values is to use the alpha channel of the mask image.＼
</dt>
	<dd>
この手法では、
所与の地点における~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.
</dd>

	<dt>
`~mask画像$の輝度を利用する：
◎
The second method of calculating the mask values is to use the luminance of the mask image.＼
</dt>
	<dd>
<p>
この手法では、
所与の地点における~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.
</p>
		<ol>
			<li>
<p>
色~channel値から輝度~値を算出する：
◎
Compute a luminance value from the color channel values.
</p>
				<ol>
					<li>
`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.
</li>
					<li>
乗算済みでない~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.
</li>
				</ol>
			</li>
			<li>
算出された輝度~値に画素の~alpha値を乗算して，~mask値を生産する。
◎
Multiply the computed luminance value by the corresponding alpha value to produce the mask value.
</li>
		</ol>
	</dd>
</dl>

<p>
利用される手法を問わず、
~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.
</p>

<ul>
	<li>
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.
</li>
	<li>
<p>
単~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.
</p>

<p class="note">注記：
~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.
</p>

	</li>
</ul>

<p class="note">注記：
~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.
</p>

<p>
~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.
</p>

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

<p class="note">注記：
`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.
</p>

			</section>
			<section id="layering">
<h4 title="Layering Multiple Mask Images">7.10.2. 複数の~mask画像の多層化法</h4>

<p>
~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 &lt;mask-reference&gt;s still creates a layer.
◎
See Layering Multiple Background Images [CSS3BG].
</p>

<p>
`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.
</p>

<p>
すべての`~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.
</p>

			</section>
		</section>
	</section>
	<section id="mask-borders">
<h2 title="Border-Box Mask">8. ~border~boxの~mask</h2>

<p>
`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.
</p>

<figure>
<figcaption id="_dgm-mask-box-image-mask">
`~mask~border画像$を成す各~片。
◎
Pieces of a mask border image.
</figcaption></figure>

<p>
これらの各~片は、
`~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].
</p>

<div class="example">
<p>
次の例における`~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.
</p>

<figure>
<figcaption id="_dgm-mask-box-image">
`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.
</figcaption></figure>

<pre class="lang-css">
div {
    background: linear-gradient(bottom, #F27BAA 0%, #FCC8AD 100%);
    mask-border-slice: 25 fill;
    mask-border-repeat: stretch;
    mask-border-source: url(mask.png);
}
</pre>
</div>

		<section id="the-mask-border-source">
<h3 title="Mask Border Image Source: the mask-border-source property">8.1. ~mask~border画像~source： `mask-border-source^p ~prop</h3>

◎名 `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 &lt;image&gt;
◎順 文法に従う
◎ア 離散的
◎表終

<p>
`~mask~border画像@
として利用される画像を指定する。
◎
Specifies an image to be used as mask border image.
</p>

<p>
次に該当する画像は、
無視され，要素を~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.
</p>

<p>
`~mask~border画像$を処理する方法は、
`~maskの処理-法$secを見よ。
◎
See “Mask processing” on how to process the mask border image.
</p>

<p>
算出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.
</p>

<p>
［
`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.
</p>

<p class="note">注記：
`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.
</p>

		</section>
		<section id="the-mask-border-mode">
<h3 title="Mask Border Image Interpretation: the mask-border-mode property">8.2. ~mask~border画像の解釈： `mask-border-mode^p ~prop</h3>

◎名 `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
◎継 されない
◎百 受容しない
◎算 指定されたとおり
◎順 文法に従う
◎ア 離散的
◎表終

<p>
`mask-border-mode$p ~propは、
`mask-border-source$p 用の `image$t 値は［
輝度~mask, ~alpha~mask
］のどちらとして扱われるかを指示する（`~maskの処理-法$secを見よ）。
◎
The mask-border-mode property indicates whether the &lt;image&gt; value for mask-border-source is treated as luminance mask or alpha mask. (See Mask processing.)
</p>

<p>
各種 値の意味は：
◎
Values have the following meanings:
</p>

<dl class="valdef">
	<dt>`alpha@v</dt>
	<dd>
`~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.
</dd>

	<dt>`luminance@v</dt>
	<dd>
`~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.
</dd>
</dl>

<p>
［
`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.
</p>

		</section>
		<section id="the-mask-border-slice">
<h3 title="Mask Border Image Slicing: the mask-border-slice property">8.3. ~mask~border画像の切分け法： `mask-border-slice^p ~prop</h3>

◎名 `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
◎算 指定されたとおり
◎順 文法に従う
◎ア 離散的
◎表終

<p>
この~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.
</p>

<p>
各種 値の定義については、
`border-image-slice$p ~propを見よ。
`CSS3BG$r
。
◎
See the border-image-slice property [CSS3BG] for the definitions of the property values.
</p>

		</section>
		<section id="the-mask-border-width">
<h3 title="Masking Areas: the mask-border-width property">8.4. ~masking区画： `mask-border-width^p ~prop</h3>

◎名 `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 &lt;length&gt;s made absolute, otherwise as specified
◎順 文法に従う
◎ア 離散的
◎表終

<p>
`~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.
</p>

<p>
各種 値の定義については、
`border-image-width$p ~propを見よ。
`CSS3BG$r
◎
See the border-image-width property [CSS3BG] for the definitions of the property values.
</p>

<p class="note">注記：
~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.
</p>

		</section>
		<section id="the-mask-border-outset">
<h3 title="Edge Overhang: the mask-border-outset property">8.5. 辺の張り出し： `mask-border-outset^p ~prop</h3>

◎名 `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 &lt;length&gt;s made absolute, otherwise as specified
◎順 文法に従う
◎ア 離散的
◎表終

<p>
値は、
`~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.
</p>

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

<p class="note">注記：
~layout~boxが結付けられない~SVG要素に対しては、
`border-width$p は `0^v と見なされる。
◎
Note: For SVG elements without associated layout box the border-width is considered to be 0.
</p>

		</section>
		<section id="the-mask-border-repeat">
<h3 title="Mask Border Image Tiling: the mask-border-repeat property">8.6. ~mask~border画像の敷詰法： `mask-border-repeat^p ~prop</h3>

◎名 `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
◎継 されない
◎百 受容しない
◎算 指定されたとおり
◎順 文法に従う
◎ア 離散的
◎表終

<p>
この~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.
</p>

<p>
各種 値の定義については、
`border-image-repeat$p ~propを見よ。
`CSS3BG$r
◎
See the border-image-repeat property [CSS3BG] for the definitions of the property values.
</p>

<p>
`~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
</p>

		</section>
		<section id="the-mask-border">
<h3 title="Mask Border Image Shorthand: the mask-border property">8.7. ~mask~border画像~略式： `mask-border^p ~prop</h3>

◎名 `mask-border@p
◎値 `mask-border-source$tp
|| `mask-border-slice$tp [ / `mask-border-width$tp? [ / `mask-border-outset$tp ]? ]?
|| `mask-border-repeat$tp
|| `mask-border-mode$tp
◎初 個々の~propを見よ
◎適 個々の~propを見よ
◎継 されない
◎百 受容しない
◎算 個々の~propを見よ
◎順 文法に従う
◎ア 個々の~propを見よ
◎表終

<p>
これは、
次に挙げる~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.
</p>

<p class="note">注記：
`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.
</p>

		</section>
		<section id="masking-with-the-mask-border-image">
<h3 title="Masking with the mask border image">8.8. ~mask~border画像による~masking</h3>

<p>
`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].
</p>

<p>
~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.
</p>

<p>
`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.
</p>

		</section>
	</section>
	<section id="svg-masks">
<h2 title="SVG Mask Sources">9. ~SVGによる~mask~source</h2>

		<section id="MaskElement">
<h3 title="The mask element">9.1. `mask^e 要素</h3>

◎要素名 `mask@e
◎分類
`容器~要素$,
`決して描画されない要素$
◎
container elements, never-rendered element

◎内容

任意個数, 任意順序の，次に挙げる要素
⇒＃
`~animation要素$,
`記述的~要素$,
`図形~要素$,
`構造上の要素$,
`~gradient要素$,
`a$e,
`clipPath$e,
`color-profile$e,
`cursor$e,
`filter$e,
`font$e,
`font-face$e,
`foreignObject$e,
`image$e,
`marker$e,
`mask$e,
`pattern$e,
`script$e,
`style$e,
`switch$e,
`view$e,
`text$e,
`altGlyphDef$e

◎属性
`条件付き処理~属性$,
`中核~属性$,
`呈示~属性$,
`class$a,
`style$a,
`x$a,
`y$a,
`width$a,
`height$a,
`maskUnits$a,
`maskContentUnits$a

◎界面 `SVGMaskElement$I
◎表終

属性定義

<dl class="valdef">
	<dt>`maskUnits@a = "`userSpaceOnUse$vMU | `objectBoundingBox$vMU"</dt>
	<dd>
<p>
［
`x$a, `y$a, `width$a, `height$a
］属性~用の座標系（これらの属性は どのような座標系における値を表現するか）を定義する。
`mask$p ~propを介してこの要素を参照している要素（すなわち，この要素が定義する~maskが適用される要素）を %E で表すとき、
この座標系は，指定された値に応じて 次で与えられる：
◎
Defines the coordinate system for attributes x, y, width and height.
</p>
		<dl class="switch">
			<dt>`userSpaceOnUse@vMU</dt>
			<dd>
%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).
</dd>

			<dt>`objectBoundingBox@vMU</dt>
			<dd>
座標［
(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.
</dd>
		</dl>
	</dd>
	<dd>
この属性が指定されていない場合の効果は、
値 `objectBoundingBox$vMU が指定されていたかのようになる。
◎
If attribute maskUnits is not specified, then the effect is as if a value of objectBoundingBox were specified.
</dd>
	<dd>
~animate可能。
◎
Animatable: yes.
</dd>

	<dt>`maskContentUnits@a = "`userSpaceOnUse@vMCU | `objectBoundingBox@vMCU"</dt>
	<dd>
`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.
</dd>
	<dd>
この属性が指定されていない場合の効果は、
値 `userSpaceOnUse$vMCU が指定されていたかのようになる。
◎
If attribute maskContentUnits is not specified, then the effect is as if a value of userSpaceOnUse were specified.
</dd>
	<dd>
~animate可能。
◎
Animatable: yes.
</dd>

	<dt>`x@a = "`length-percentage$t"</dt>
	<dd>
アリな最も広い~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.
</dd>
	<dd>
~animate可能。
◎
Animatable: yes.
</dd>

	<dt>`y@a = "`length-percentage$t"</dt>
	<dd>
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.
</dd>

	<dt>`width@a = "`length-percentage$t"</dt>
	<dd>
アリな最も広い~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.
</dd>
	<dd>
~animate可能。
◎
Animatable: yes.
</dd>

	<dt>`height@a = "`length-percentage$t"</dt>
	<dd>
~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.
</dd>
</dl>

<p>
要素が下に与える条件 (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.
</p>

<p>
上で利用される条件 (A) は、
次で与えられる
⇒
要素には［
`x$a, `y$a, `width$a, `height$a
］いずれかの属性は指定されている
【なぜこの条件が必要yなのか／この条件が満たされない場合の挙動については言及されていない。】
◎
↑↑</p>

<p>
`mask$e 要素は、
先祖から~CSS~propを継承するが，
`mask$e 要素を参照している要素からは<em>継承しない</em>。
◎
CSS properties inherit into the mask element from its ancestors; properties do not inherit from the element referencing the mask element.
</p>

<p>
`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.
</p>

		</section>
		<section id="the-mask-type">
<h3 title="Mask Source Interpretation: the mask-type property">9.2. ~mask~sourceの解釈： `mask-type^p ~prop</h3>

◎名 `mask-type@p
◎値 `luminance^v | `alpha^v
◎初 `luminance^v
◎適 `mask$e 要素
◎継 されない
◎百 受容しない
◎算 指定されたとおり
◎順 文法に従う
◎ア 離散的
◎表終

<p>
`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.
</p>

<p>
各種 値の意味は：
◎
Values have the following meanings:
</p>

<dl class="valdef">
	<dt>`luminance@v</dt>
	<dd>
~maskの輝度~値が利用されるべきであることを指示する。
◎
Indicates that the luminance values of the mask should be used.
</dd>

	<dt>`alpha@v</dt>
	<dd>
~maskの~alpha値が利用されるべきであることを指示する。
◎
Indicates that the alpha values of the mask should be used.
</dd>
</dl>

<p>
`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.
</p>

<div class="example">
<p>
次の例では、
`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.
</p>
<pre class="lang-xml">
&lt;svg&gt;
  &lt;mask style="mask-type: luminance;" id="mask"&gt;
    ...
  &lt;/mask&gt;
&lt;/svg&gt;

&lt;p style="mask-image: url(#mask); mask-mode: auto;"&gt;
  &lt;!-- <span class="comment">
~maskされる内容
◎
This is the masked content.
</span> --&gt;
&lt;/p&gt;
</pre>

<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.
</p>

<pre class="lang-xml">
&lt;svg&gt;
 &lt;mask style="mask-type: luminance;" id="mask2"&gt;
   ...
 &lt;/mask&gt;
&lt;/svg&gt;

&lt;p style="mask-image: url(#mask2); mask-mode: alpha;"&gt;
   &lt;!-- <span class="comment">
~maskされる内容
◎
This is the masked content.
</span> --&gt;
&lt;/p&gt;
</pre>
</div>

<p>
`mask-type$p ~propは、
~SVG要素~用の`呈示~属性$である。
◎
The mask-type property is a presentation attribute for SVG elements.
</p>

		</section>
	</section>
	<section id="priv">
<h2 title="Privacy Considerations">~privacyの考慮点</h2>

<p>
~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.
</p>

<p>
計時~攻撃は、
演算にかかる時間を調査して，保護されている内容についての情報を得する手法である。
例えば，赤色~画素を描く方が緑色~画素より余計にかかる場合、
要素の内容に一切~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.
</p>

<p>
この~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.
</p>

	</section>
	<section id="sec">
<h2 title="Security Considerations">~securityの考慮点</h2>

<p>
`mask-source$t ／ `clip-source$t
には、
資源の~fetchingに対し特別な要件がある。
◎
&lt;mask-source&gt;s and &lt;clip-source&gt;s have special requirements on fetching resources.
</p>

<p>
~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 &lt;mask-source&gt;, &lt;clip-source&gt; and &lt;image&gt; 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.
</p>

<p class="trans-note">【†
これらの~parameterは、
廃された~W3C~HTML仕様に定義されていた~algoの記述に基づいており，
どう適用するべきか意図不明になっている
— 次を行うものと推定される
⇒＃
`~CORSになり得る要請を作成する＠~HTMLurl#create-a-potential-cors-request$( ~stylesheetの~URL, `image^l, `匿名＠~HTMLurl#attr-crossorigin-anonymous$st )
◎終
が、
本当は，
`CSS-VALUES-4$r `§ ~URL処理~model＠~CSSVAL#url-processing$
に基づくよう定義し直されるべきであろう。
】</p>

	</section>
	<section id="clip-property">
<h2 title="Appendix A: The deprecated clip property">付録 A. 非推奨にされた `clip^p ~prop</h2>

◎名 `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値の型による
◎表終

<p>
`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.
</p>

<p>
各種 値の意味は：
◎
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:
</p>

<dl class="valdef">
	<dt>`auto@v</dt>
	<dd>
要素は切抜かれない。
◎
The element does not clip.
</dd>

	<dt class="prod">`rect@f = rect( `top$t, `right$t, `bottom$t, `left$t )</dt>
	<dd>
［
`top$t ／ `right$t ／ `left$t ／ `bottom$t
］は、
~boxの［
上端／左端／上端／左端
］~border辺から，切抜き領域の［
上端／右端／下端／左端
］辺までの~offsetを指定する。
◎
&lt;top&gt; and &lt;bottom&gt; specify offsets from the top border edge of the box, and &lt;right&gt;, and &lt;left&gt; specify offsets from the left border edge of the box.＼
</dd>
	<dd>
作者は、
各~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.
</dd>
	<dd>
<p>
［
`top@t ／ `right@t ／ `bottom@t ／ `left@t
］は、
`length$t 値または
`~auto0@v
をとり得る。
`length$t に対する負な値も許可される。
値 `~auto0$v は、
切抜き領域の対応する辺を，要素により生成される`~border~box$を成す辺と同じにすることを意味する
— すなわち `~auto0$v は：
</p>
		<ul>
			<li>
`top$t ／
`left$t
に対しては
⇒
`0^v と同じになる。
</li>
			<li>
`bottom$t に対しては
⇒
~boxの`~border~box$の使用~縦幅と同じになる。
【！`width$p の使用~値, 縦方向の［~padding幅, ~border幅］］の総和】
</li>
			<li>
`right$t に対しては
⇒
~boxの`~border~box$の使用~横幅と同じになる。
【！`height$p の使用~値, 横方向の［~padding幅, ~border幅］］の総和】
</li>
		</ul>
◎
&lt;top&gt;, &lt;right&gt;, &lt;bottom&gt;, and &lt;left&gt; may either have a &lt;length&gt; 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 &lt;top&gt; and &lt;left&gt;, the same as the used value of the height plus the sum of vertical padding and border widths for &lt;bottom&gt;, and the same as the used value of the width plus the sum of the horizontal padding and border widths for &lt;right&gt;, such that four auto values result in the clipping region being the same as the element’s border box).
</dd>
	<dd>
<p>
座標を画素~~単位に丸めるときは、
次について~careされるべきである：
</p>
		<ul>
			<li>
次が満たされる場合、
可視になる画素は無いようにすること
⇒
［
`left^t, `right^t の値は同じになる
］~OR［
`top^t, `bottom^t の値は同じになる
］
</li>
			<li>
次が満たされる場合、
要素の~border~box内の全~画素が可視になるようにすること
⇒
`left^t, `right^t, `top^t, `bottom^t の値はどれも `~auto0$v である
</li>
		</ul>
◎
When coordinates are rounded to pixel coordinates, care should be taken that no pixels remain visible when &lt;left&gt; and &lt;right&gt; have the same value (or &lt;top&gt; and &lt;bottom&gt; have the same value), and conversely that no pixels within the element’s border box remain hidden when these values are auto.
</dd>
</dl>

<p>
`clip$p ~propは、
~SVG要素~用の`呈示~属性$である。
◎
The clip property is a presentation attribute for SVG elements.
</p>

<div class="example">
<p>
次の規則は：
◎
Example: The following two rules:
</p>

<pre class="lang-css">
div {
  clip: rect(1em, 11em, 9em, 1em);
}
</pre>

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

<p>
`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:
</p>

<figure>
<p class="alt" hidden id="_dgm-clip-1">
`rect^f による図形~用の各側の値
◎
Values for rect shape
</p>
<figcaption>
矩形な切抜き領域を伴う塊~boxを示す図式。
◎
This diagram illustrates two block boxes, one next to the other, with rectangular clipping regions of different dimensions. (See long description.)
</figcaption></figure>

<table>
<caption>
上の例による切抜きの~~適用を示す図（利用中の~UAによる呈示）
</caption>
<thead>
<tr><th>`clip^css の適用前
<th>切抜き領域（黄色）
<th>`clip^css の適用後
<tbody>

<tr><td>
<div class="_ex-clip">
	<div>
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
はひふへほ
まみむめも
らりるれろ
わをん
	</div>
</div>

<td>
<div class="_ex-clip">
	<div>
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
はひふへほ
まみむめも
らりるれろ
わをん
</div>
	<div style="border:none; background:yellow; top:2em;left:2em; right:0; height:8em; width:10em; opacity:0.5; outline:solid 1px var(--R-color);"></div>
</div>

<td>
<div class="_ex-clip">
	<div style="clip: rect(1em, 11em, 9em, 1em);">
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
はひふへほ
まみむめも
らりるれろ
わをん
	</div>
</div>
</table>
</div>

	</section>
	<section id="compute-stroke-bounding-box">
<h2 title="Appendix B: Compute stroke bounding box">付録 B. ~stroke限界~boxを算出する</h2>

<p>
`~stroke限界~box@
を算出する~algoは、
%要素 の型に応じて，次に従う：
◎
The algorithm to compute the stroke bounding box is as follows, depending on the type of element:
</p>

<dl class="switch">
	<dt>
［
`use$e ／ `image$e
］以外の【！without】`~graphics要素$
◎
a graphics element without use or image
</dt>
	<dt>
`a$e 要素のうち，`~text内容~要素$を伴うもの
◎
an a element with a text content element 
</dt>
	<dd>
		<ol>
			<li>
%~box ~LET %要素 の`~obj限界~box$を成す矩形
◎
Let box be a rectangle initialized to the object bounding box of element.
</li>
			<li>
( %stroke, %width, %linejoin, %miterlimit, %linecap ) ~LET 順に， %要素 の
( `stroke$p, `stroke-width$p, `stroke-linejoin$p, `stroke-miterlimit$p, `stroke-linecap$p )
の`使用~値$
◎
↓</li>
			<li>
~IF［
%stroke ~EQ `none^v
］~OR［
%width ~EQ 0
］
⇒
~RET %~box
◎
If the used value of stroke-width &lt;= 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.
</li>
			<li>
%係数 ~LET 1
◎
↓</li>
			<li>
<p>
~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:
</p>
				<ol>
					<li>
~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.
</li>
					<li>
~ELIF［
%linecap ~EQ `square$v
］
⇒
%係数 ~SET √2
◎
the used value for stroke-linecap is square
• Multiply delta with the square root of 2.
</li>
				</ol>
			</li>
			<li>
%~box の各~辺を ( %係数 ~MUL %width ~DIV 2 ) だけ外へ拡げる
◎
Inflate box with the value of delta.
</li>
			<li>
~RET %~box
◎
Return box.
</li>
		</ol>

<p class="note">注記：
［
`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.
</p>
	</dd>

	<dt>
`容器~要素$
◎
a container element
</dt>
	<dt>
`use$e 要素
◎
use
</dt>
	<dd>
		<ol>
			<li>
%親 ~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.
</li>
			<li>
~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.
</li>
		</ol>
	</dd>

	<dt>
`image$e 要素
◎
image
</dt>
	<dd>
		<ol>
			<li>
~RET %要素 の`~obj限界~box$
◎
Return the object bounding box of element.
</li>
		</ol>
	</dd>
</dl>

<p class="note">注記：
~SVG仕様の将来~versionは、
この節を上書きし得る。
◎
Note: A future version of the SVG specification may override this section.
</p>

	</section>
	<section id="DOMInterfaces">
<h2 title="Appendix C: DOM interfaces">付録 C. ~DOM~interface</h2>

		<section id="InterfaceSVGClipPathElement">
<h3 title="Interface SVGClipPathElement">~interface `SVGClipPathElement^I</h3>

<p>
`SVGClipPathElement@I
~interfaceは、
`clipPath$e 要素に対応する。
◎
The SVGClipPathElement interface corresponds to the clipPath element.
</p>

<pre class="idl">
[`Exposed$=Window]
interface `SVGClipPathElement$I : `SVGElement$I {
  readonly attribute `SVGAnimatedEnumeration$I `clipPathUnits$m;
  readonly attribute `SVGAnimatedTransformList$I `transform$m;
};
</pre>

【！Attributes:】
<dl class="idl-def">
	<dt>
`clipPathUnits@m
◎
clipPathUnits, of type SVGAnimatedEnumeration, readonly
</dt>
	<dd>
コレの `clipPathUnits$a 属性に対応する。
`SVGUnitTypes$I にて定義される，いずれかの定数をとる。
◎
Corresponds to attribute clipPathUnits on the given clipPath element. Takes one of the constants defined in SVGUnitTypes.
</dd>

	<dt>
`transform@m
◎
transform, of type SVGAnimatedTransformList, readonly
</dt>
	<dd>
コレの `transform$p 呈示~属性に対応する。
◎
Corresponds to presentation attribute transform on the given element.
</dd>
</dl>

		</section>
		<section id="InterfaceSVGMaskElement">
<h3 title="Interface SVGMaskElement">~interface `SVGMaskElement^I</h3>

<p>
`SVGMaskElement$I ~interfaceは、
`mask$e 要素に対応する。
◎
The SVGMaskElement interface corresponds to the mask element.
</p>

<pre class="idl">
[`Exposed$=Window]
interface `SVGMaskElement@I : `SVGElement$I {
  readonly attribute `SVGAnimatedEnumeration$I `maskUnits$m;
  readonly attribute `SVGAnimatedEnumeration$I `maskContentUnits$m;
  readonly attribute `SVGAnimatedLength$I `x$m;
  readonly attribute `SVGAnimatedLength$I `y$m;
  readonly attribute `SVGAnimatedLength$I `width$m;
  readonly attribute `SVGAnimatedLength$I `height$m;
};
</pre>

【！Attributes】
<dl class="idl-def">
	<dt>
`maskUnits@m
◎
maskUnits, of type SVGAnimatedEnumeration, readonly
</dt>
	<dd>
コレの `maskUnits$a 属性に対応する。
`SVGUnitTypes$I にて定義される，いずれかの定数をとる。
◎
Corresponds to attribute maskUnits on the given mask element. Takes one of the constants defined in SVGUnitTypes.
</dd>

	<dt>
`maskContentUnits@m
◎
maskContentUnits, of type SVGAnimatedEnumeration, readonly
</dt>
	<dd>
コレの `maskContentUnits$a 属性に対応する。
`SVGUnitTypes$I にて定義される，いずれかの定数をとる。
◎
Corresponds to attribute maskContentUnits on the given mask element. Takes one of the constants defined in SVGUnitTypes.
</dd>

	<dt>
`x@m
◎
x, of type SVGAnimatedLength, readonly
</dt>
	<dd>
コレの `x$a 属性に対応する。
◎
Corresponds to attribute x on the given mask element.
</dd>

	<dt>
`y@m
◎
y, of type SVGAnimatedLength, readonly
</dt>
	<dd>
コレの `y$a 属性に対応する。
◎
Corresponds to attribute y on the given mask element.
</dd>

	<dt>
`width@m
◎
width, of type SVGAnimatedLength, readonly
</dt>
	<dd>
コレの `width$a 属性に対応する。
◎
Corresponds to attribute width on the given mask element.
</dd>

	<dt>
`height@m
◎
height, of type SVGAnimatedLength, readonly
</dt>
	<dd>
コレの `height$a 属性に対応する。
◎
Corresponds to attribute height on the given mask element.
</dd>
</dl>

		</section>
	</section>
	<section id="changes">
<h2 title="Changes since last publication">最後の公表版からの変更点</h2>

<p class="trans-note">【
この節の内容は、
未訳。
】</p>

	</section>
	<section id="acknowledgments">
<h2 title="Acknowledgments">謝辞</h2>

<p lang="en">
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.
</p>
	</section>

</main></div>