14 クリッピング, マスク, 合成

目次

• 14.1 概要
• 14.2 単純アルファ合成
• 14.3 クリッピングパス
  • 14.3.1 クリッピングパスの概要
  • 14.3.2 初期クリッピングパス
  • 14.3.3 'overflow' と 'clip' プロパティ
  • 14.3.4 クリッピングパスをビューポートと viewBox のどちらに合わせるか
  • 14.3.5 新しいクリッピングパスの確立
  • 14.3.6 クリッピングパス, 要素の幾何, ポインタイベント
• 14.4 マスク
• 14.5 オブジェクト／グループ不透明度：'opacity' プロパティ
• 14.6 Clip モジュール
• 14.7 基本 Clip モジュール
• 14.8 Mask モジュール
• 14.9 DOM インターフェース

• 14.1 Introduction
• 14.2 Simple alpha compositing
• 14.3 Clipping paths
  • 14.3.1 Introduction
  • 14.3.2 The initial clipping path
  • 14.3.3 The 'overflow' and 'clip' properties
  • 14.3.4 Clip to viewport vs. clip to viewBox
  • 14.3.5 Establishing a new clipping path
• 14.4 Masking
• 14.5 Object and group opacity: the 'opacity' property
• 14.6 Clip Module
• 14.7 Basic Clip Module
• 14.8 Mask Module
• 14.9 DOM interfaces

14.1 概要

SVG は次のようなクリッピング（ clipping ）とマスク（ masking ）の機能をサポートする：

SVG supports the following clipping/masking features:

• クリッピングパス （ clipping paths ）は、 'path', 'text', 基本図形 の任意の組み合わせにより、「内側」のものは全て見えるが外側のものは全て覆い隠す、（境界上でのアンチエイリアスを無視すれば）１ビットのマスクの外形線を提供する。
• clipping paths, which uses any combination of 'path', 'text' and basic shapes to serve as the outline of a (in the absence of anti-aliasing) 1-bit mask, where everything on the "inside" of the outline is allowed to show through but everything on the outside is masked out
• マスク （ mask ）は、 グラフィックス要素 または他のコンテナ要素を含むことができる コンテナ要素 であり、前景オブジェクトを現在の背景に合成するための半透明のマスクとして用いられるグラフィックの集合を定義する。
• masks, which are container elements which can contain graphics elements or other container elements which define a set of graphics that is to be used as a semi-transparent mask for compositing foreground objects into the current background.

クリッピングパス と マスク における根本的な違いは、クリッピングパスは２値のマスク（ hard mask - 即ち、境界上でのアンチエイリアスを無視するなら、完全に不透明または透明な画素からなるシルエット）である一方、マスクは各画素の値が透明さの度合いを指示する画像からなることである。すなわちマスクにおいては、各画素の値は完全な透明から完全な不透明までの値をとり得る。

One key distinction between a clipping path and a mask is that clipping paths are hard masks (i.e., the silhouette consists of either fully opaque pixels or fully transparent pixels, with the possible exception of anti-aliasing along the edge of the silhouette) whereas masks consist of an image where each pixel value indicates the degree of transparency vs. opacity. In a mask, each pixel value can range from fully transparent to fully opaque.

SVG は単純アルファ混色合成のみサポートする（ 単純アルファ合成 を見よ）。

SVG supports only simple alpha blending compositing (see Simple Alpha Compositing).

14.2 単純アルファ合成

グラフィックス要素はキャンバス上にすでに描画された要素と単純アルファ合成を用いて混色され、結果におけるキャンバスの画素の色と不透明度は次の公式（全ての色値はアルファによる積算済み）で与えられる：

Graphics elements are blended into the elements already rendered on the canvas using simple alpha compositing, in which the resulting color and opacity at any given pixel on the canvas is the result of the following formulas (all color values use premultiplied alpha):

Er, Eg, Eb    - 要素の色値
Ea            - 要素のアルファ値
Cr, Cg, Cb    - キャンバスの色値（混色前）
Ca            - キャンバスのアルファ値（混色前）
Cr', Cg', Cb' - キャンバスの色値（混色後）
Ca'           - キャンバスのアルファ値（混色後）
Ca' = 1 - (1 - Ea) * (1 - Ca)
Cr' = (1 - Ea) * Cr + Er
Cg' = (1 - Ea) * Cg + Eg
Cb' = (1 - Ea) * Cb + Eb

Er, Eg, Eb    - Element color value
Ea            - Element alpha value
Cr, Cg, Cb    - Canvas color value (before blending)
Ca            - Canvas alpha value (before blending)
Cr', Cg', Cb' - Canvas color value (after blending)
Ca'           - Canvas alpha value (after blending)
Ca' = 1 - (1 - Ea) * (1 - Ca)
Cr' = (1 - Ea) * Cr + Er
Cg' = (1 - Ea) * Cg + Eg
Cb' = (1 - Ea) * Cb + Eb

次の描画プロパティは合成演算を行う色空間についての情報を提供し、合成演算に適用される：

The following rendering properties, which provide information about the color space in which to perform the compositing operations, apply to compositing operations:

• 'color-interpolation'
• 'color-rendering'

14.3 クリッピングパス

14.3.1 クリッピングパスの概要

クリッピングパスは塗りを適用する領域を制限する。概念的には、現在のクリッピングパスにより制限された領域の外側へは描画されない。クリッピングパスは、（輪郭におけるアンチエイリアスを無視すれば）外側の画素は全てアルファ値０の黒色、内側の画素は全てアルファ値１の白色に設定されたマスクの一種と考えることができる 。

The clipping path restricts the region to which paint can be applied. Conceptually, any parts of the drawing that lie outside of the region bounded by the currently active clipping path are not drawn. A clipping path can be thought of as a mask wherein those pixels outside the clipping path are black with an alpha value of zero and those pixels inside the clipping path are white with an alpha value of one (with the possible exception of anti-aliasing along the edge of the silhouette).

14.3.2 初期クリッピングパス

'svg' 要素が文書のルート要素であるか、あるいは CSS や XSL のレイアウト規則に従ってレイアウトされている文書に埋めこまれている場合、ＵＡはその SVG 文書片に対する初期クリッピングパスを確立しなければならない。初期クリッピングパスは、 'overflow' および 'clip' プロパティをもとに、 SVG-ＵＡの追加の処理規則に従って確立される：

When an 'svg' element is either the root element in the document or is embedded within a document whose layout is determined according to the layout rules of CSS or XSL, then the user agent must establish an initial clipping path for the SVG document fragment. The 'overflow' and 'clip' properties along with additional SVG user agent processing rules determine the initial clipping path which the user agent establishes for the SVG document fragment:

14.3.3 'overflow' と 'clip' プロパティ

'overflow' プロパティがとる値とその意味は [CSS2-overflow] で定義されるものと同じである。しかしながら、次の追加規則が適用される：

The 'overflow' property has the same parameter values and has the same meaning as defined in [ CSS2-overflow]; however, the following additional points apply:

• 'overflow' プロパティは 新しいビューポートを確立する要素 （例えば 'svg' 要素）, 'pattern' 要素, 'marker' 要素に対しては適用されるが、他の全ての要素に対しては何の効力も無い（即ちクリッピング矩形は作成されない）。
• The 'overflow' property applies to elements that establish new viewports (e.g., 'svg' elements), 'pattern' elements and 'marker' elements. For all other elements, the property has no effect (i.e., a clipping rectangle is not created).
• 'overflow' プロパティが適用可能な要素に対し、 'overflow' プロパティの値を hidden または scroll に設定した場合、矩形のクリッピングパスが新たに作成される。その効果は、同じ形の矩形を表す 'rect' 要素を内容とする 'clipPath' 要素を定義した上で、与えられた要素の 'clip-path' プロパティに 'clipPath' 要素の <uri> を指定するのと同じになる。
• For those elements to which the 'overflow' property can apply, if the 'overflow' property has the value hidden or scroll, the effect is that a new clipping path in the shape of a rectangle is created. The result is equivalent to defining a 'clipPath' element whose content is a 'rect' element which defines the equivalent rectangle, and then specifying the <uri> of this 'clipPath' element on the 'clip-path' property for the given element.
• 'overflow' プロパティの値が hidden あるいは scroll でない場合、何の効力も生じない（即ち、クリッピング矩形は作成されない）。
• If the 'overflow' property has a value other than hidden or scroll, the property has no effect (i.e., a clipping rectangle is not created).
• SVG 内容においては、値 auto は値 visible と同値である。
• Within SVG content, the value auto is equivalent to the value visible.
• 最も外側の svg 要素 が CSS layout [CSS2-LAYOUT] または XSL formatting [XSL] を利用する親の XML 言語に埋めこまれている場合、 'overflow' プロパティの値が hidden または scroll ならば、初期クリッピングパスは初期 ビューポート の境界と同じ形になり、それ以外の値の場合は [CSS2-overflow] で定められるクリッピング規則に従って設定される。
• When an outermost 'svg' element is embedded inline within a parent XML grammar which uses CSS layout [ CSS2-LAYOUT] or XSL formatting [ XSL], if the 'overflow' property has the value hidden or scroll, then the user agent will establish an initial clipping path equal to the bounds of the initial viewport; otherwise, the initial clipping path is set according to the clipping rules as defined in [ CSS2-overflow].
• 最も外側の svg 要素 が独立であるか、 CSS layout [CSS2-LAYOUT] または XSL formatting [XSL] を利用しない親の XML 言語に埋めこまれている場合、その 'svg' 要素の 'overflow' プロパティは視覚的描画の目的においては無視され、初期クリッピングパスは初期 ビューポート の境界に設定される。
• When an outermost SVG 'svg' element is stand-alone or embedded inline within a parent XML grammar which does not use CSS layout [ CSS2-LAYOUT] or XSL formatting [ XSL], the 'overflow' property on the outermost 'svg' element is ignored for the purposes of visual rendering and the initial clipping path is set to the bounds of the initial viewport.
• [CSS2-overflow] の定義による 'overflow' の初期値は 'visible' であるが、 SVG の ＵＡスタイルシート はこの初期値を上書きし、 新しいビューポートを確立する要素 （例えば 'svg' 要素）, 'pattern' 要素, 'marker' 要素の 'overflow' プロパティの値を 'hidden' に設定する。
• The initial value for 'overflow' as defined in [ CSS2-overflow] is 'visible'; however, SVG's user agent style sheet overrides this initial value and set the 'overflow' property on elements that establish new viewports (e.g., 'svg' elements), 'pattern' elements and 'marker' elements to the value 'hidden'.

上記の結果、 SVG-ＵＡにおける既定の振る舞いでは、 新しいビューポートを確立する要素, 'pattern' 要素, 'marker' 要素それぞれに対し新しいクリッピングパスが確立され、その形は初期 ビューポート の境界に合わせられることとなる。

As a result of the above, the default behavior of SVG user agents is to establish a clipping path to the bounds of the initial viewport and to establish a new clipping path for each element which establishes a new viewport and each 'pattern' and 'marker' element.

関連する情報については クリッピングパスをビューポートと viewBox のどちらに合わせるか を見よ。

For related information, see Clip to viewport vs. clip to viewBox.

'clip' プロパティは [CSS2-clip] で定義されるものと同じ値と意味を持つ。値 <shape> における座標値は単位無しでもよく、その場合は現在の利用座標系における値を表す。値 "auto" を指定した場合のクリッピングパスは要素で確立されるビューポートの境界になる。

The 'clip' property has the same parameter values as defined in [ CSS2-clip]. Unitless values, which indicate current user coordinates, are permitted on the coordinate values on the <shape>. The value of "auto" defines a clipping path along the bounds of the viewport created by the given element.

14.3.4 クリッピングパスをビューポートと viewBox のどちらに合わせるか

'overflow' および 'clip' プロパティと ＵＡスタイルシート の初期値により初期ビューポートの境界に初期クリッピングパスが設定されることは重要な注意として記憶すべきである。 viewBox 属性と preserveAspectRatio 属性が指定された場合、クリッピングパスがビューポート（ 'marker' と 'pattern' 要素の場合は基準とする矩形）ではなく viewBox の境界に設定された方が望ましい場合がある。特に、 preserveAspectRatio が均等な伸縮を指定しており、かつ viewBox とビューポートの縦横比が一致していないときはそうである。

It is important to note that initial values for the 'overflow' and 'clip' properties and the user agent style sheet will result in an initial clipping path that is set to the bounds of the initial viewport. When attributes viewBox and preserveAspectRatio attributes are specified, it is sometime desirable that the clipping path be set to the bounds of the viewBox instead of the viewport (or reference rectangle, in the case of 'marker' and 'pattern' elements), particularly when preserveAspectRatio specifies uniform scaling and the aspect ratio of the viewBox does not match the aspect ratio of the viewport.

初期クリッピングパスを viewBox に合わせるためには、 'clip' プロパティに指定する矩形を viewBox 属性に指定されたものにする（パラメタが一致しないことに注意： 'clip' は値 <top>, <right>, <bottom>, <left> をとる一方、 viewBox は値 <min-x>, <min-y>, <width>, <height> をとる）。

To set the initial clipping path to the bounds of the viewBox, set the bounds of 'clip' property to the same rectangle as specified on the viewBox attribute. (Note that the parameters do not match. 'clip' takes values <top>, <right>,<bottom> and <left>, whereas viewBox takes values <min-x>, <min-y>, <width> and <height>.)

14.3.5 新しいクリッピングパスの確立

クリッピングパスは 'clipPath' 要素で定義される。クリッピングパスは 'clip-path' プロパティにより参照利用される。

A clipping path is defined with a 'clipPath' element. A clipping path is used/referenced using the 'clip-path' property.

'clipPath' 要素には 'path' 要素, 'text' 要素, 基本図形 （例えば 'circle' など）, 'use' 要素を含ませられる。ただし、 'use' 要素が 'clipPath' 要素の子要素の場合、 'path', 'text', 基本図形 いずれかの要素を直接参照していなければならず、間接参照はエラーである（ エラー処理 を見よ）。

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 shape elements. Indirect references are an error (see Error processing).

'clipPath' 要素においては、子要素の幾何における 'fill', 'stroke', 'stroke-width' などの描画プロパティは無視され、（境界におけるアンチエイリアスを無視すれば）グラフィックのシルエットを表現する１ビットのマスクが概念的に定義される。オブジェクトの外形線の外側は全て覆い隠され、塗りを適用する領域の制限に利用される。 'clipPath' 要素が複数の子要素を含む場合、それらのシルエットは論理和により合併された１つのシルエットをなすものとする。すなわち、点は 'clipPath' のいずれかの子要素に含まれるならばクリッピングパスの内側にあることになる。

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

'clip-path' プロパティからの、存在しないオブジェクトや 'clipPath' 要素でないオブジェクトへの参照はエラーである（ エラー処理 を見よ）。

It is an error if the 'clip-path' property references a non-existent object or if the referenced object is not a 'clipPath' element (see Error processing).

与えられたグラフィックス要素に対し実際に用いられるクリッピングパスは、要素の 'clip-path' プロパティ（もしあれば）で指定されるクリッピングパスと、要素の全ての祖先のクリッピングパス（祖先要素の 'clip-path' プロパティか、あるいは祖先の 新しいビューポートを確立する要素 の 'overflow' プロパティで指定されるもの）の共通部分になる。（ 初期クリッピングパス も見よ。）

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 ancestor elements, or by the 'overflow' property on ancestor elements which establish a new viewport. Also, see the discussion of the initial clipping path.)

注意：

A couple of notes:

• 'clipPath' 要素自身とその子要素は祖先要素からクリッピングパスを継承しない。
• The 'clipPath' element itself and its child elements do not inherit clipping paths from the ancestors of the 'clipPath' element.
• 'clipPath' 要素またはその子要素は 'clip-path' プロパティを持つことができる。
  'clipPath' 要素が有効な 'clip-path' 参照を持つ場合、 'clipPath' 要素の内容と参照されたクリッピングパスの共通部分が結果のクリッピングパスとなる。
  'clipPath' 要素の一つの子要素が有効な 'clip-path' 参照を持つ場合、論理和により他の子要素のシルエットと合併される前に、その子要素の幾何に対し参照先のクリッピングパスによる共通部分がとられる。
• 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.

<!ENTITY % SVG.clipPath.extra.content "" >
<!ENTITY % SVG.clipPath.element "INCLUDE" >
<![%SVG.clipPath.element;[
<!ENTITY % SVG.clipPath.content
    "(( %SVG.Description.class; )*, ( %SVG.Animation.class; %SVG.Use.class;
        %SVG.Shape.class; %SVG.Text.class; %SVG.clipPath.extra.content; )*)"
>
<!ELEMENT %SVG.clipPath.qname; %SVG.clipPath.content; >
<!-- end of SVG.clipPath.element -->]]>
<!ENTITY % SVG.clipPath.attlist "INCLUDE" >
<![%SVG.clipPath.attlist;[
<!ATTLIST %SVG.clipPath.qname;
    %SVG.Core.attrib;
    %SVG.Conditional.attrib;
    %SVG.Style.attrib;
    %SVG.Text.attrib;
    %SVG.TextContent.attrib;
    %SVG.Font.attrib;
    %SVG.Paint.attrib;
    %SVG.Color.attrib;
    %SVG.Opacity.attrib;
    %SVG.Graphics.attrib;
    %SVG.Clip.attrib;
    %SVG.Mask.attrib;
    %SVG.Filter.attrib;
    %SVG.Cursor.attrib;
    %SVG.External.attrib;
    transform %TransformList.datatype; #IMPLIED
    clipPathUnits ( userSpaceOnUse | objectBoundingBox ) #IMPLIED
>

祖先の プロパティ は 'clipPath' 要素に継承されるが、 'clipPath' 要素を参照している要素からは継承されない。

Properties inherit into the 'clipPath' element from its ancestors; properties do not inherit from the element referencing the 'clipPath' element.

'clipPath' 要素は決して直接描画されることはなく、 'clip-path' プロパティにより参照される以外に使い道はない。 'display' プロパティは 'clipPath' 要素に適用されない。すなわち、 'clipPath' 要素は 'display' プロパティの値が none 以外であっても直接描画されることはなく、要素自身あるいはその祖先において 'display' プロパティの値が none であっても参照による利用が可能である。

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

<uri>

クリッピングパスとして利用する同じ SVG 文書片内のグラフィックスオブジェクトへの URI 参照 。

A URI reference to another graphical object within the same SVG document fragment which will be used as the clipping path.

nonzero

'fill-rule' プロパティの記述を見よ。

See description of 'fill-rule' property.

evenodd

'fill-rule' プロパティの記述を見よ。

See description of 'fill-rule' property.

'clip-rule' プロパティは 'clipPath' 要素に含まれるグラフィックス要素に対してのみ適用される。次のコードではクリッピング図形を定義する 'path' 要素に 'clip-rule' が指定されており、クリッピングパスに evenodd 規則が適用される：

The 'clip-rule' property only applies to graphics elements that are contained within a 'clipPath' element. The following fragment of code will cause an evenodd clipping rule to be applied to the clipping path because 'clip-rule' is specified on the 'path' element that defines the clipping shape:

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

一方で、次のコードでは 'clip-rule' がクリッピング図形を定義しているオブジェクトではなく、参照元の要素に指定されているので、 evenodd 規則は適用されない：

whereas the following fragment of code will not cause an evenodd clipping rule to be applied because the 'clip-rule' is specified on the referencing element, not on the object defining the clipping shape:

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

14.4 マスク

SVG においては、現在のオブジェクトを背景に合成するためのアルファマスクとして、別の任意のグラフィックスオブジェクトや 'g' 要素を利用することができる。

In SVG, you can specify that any other graphics object or 'g' element can be used as an alpha mask for compositing the current object into the background.

マスクは 'mask' 要素により定義される。マスクは 'mask' プロパティにより参照利用される。

A mask is defined with a 'mask' element. A mask is used/referenced using the 'mask' property.

'mask' 要素には任意のグラフィックス要素や 'g' のような コンテナ要素 を含ませられる。

A 'mask' can contain any graphical elements or container elements such as a 'g'.

'mask' プロパティからの、存在しないオブジェクトや 'mask' 要素でないオブジェクトへの参照はエラーである（ エラー処理 を見よ）。

It is an error if the 'mask' property references a non-existent object or if the referenced object is not a 'mask' element (see Error Processing).

マスクの効果は次のように説明される： 'mask' の子要素たちは黒地透明に初期化されたオフスクリーン画像に描画され、マスクをなす。 'mask' 要素を参照利用するグラフィックスオブジェクトはそのマスクを通して背景に塗られ、グラフィックスオブジェクトの全部あるいは一部が覆い隠される。

The effect is as if the child elements of the 'mask' are rendered into an offscreen image which has been initialized to transparent black. Any graphical object which uses/references the given 'mask' element will be painted onto the background through the mask, thus completely or partially masking out parts of the graphical object.

マスクとして用いられる任意のグラフィックスオブジェクトに対し、与えられた任意の点におけるマスク値は色チャンネルとアルファチャンネルの値から次のようにして計算される：色チャンネル値により線型輝度値（ linear luminance value ）が計算される。これは例えば次のようにして行われる：まず元画像の色値（ sRGB 色空間かもしれない）を線型 RGB 色空間（ 描画プロパティ を見よ）へ変換する。次に線型 RGB 色の積算済みでない値に輝度からアルファへの変換係数（ 'feColorMatrix' 原始フィルタで定義されている luminanceToAlpha ）を適用することにより、線型 RGB 色が線型輝度に変換される。グラフィックスオブジェクトがアルファチャンネルを含んでいる場合は、更に計算結果の線型輝度値と対応するアルファ値との積がとられ、これが結果のマスク値となる。

For any graphics object that is used as a mask, the mask value at any point is computed from the color channel values and alpha channel value as follows. A linear luminance value is computed from the color channel values. This can be done, for example, by first converting the original image color values (potentially in the sRGB color space) to the linear RGB color space (see Rendering properties). Then, using non-premultiplied linear RGB color values, apply the luminance-to-alpha coefficients (as defined in the 'feColorMatrix' filter primitive) to convert the linear RGB color values to linear luminance values. If the graphics object also includes an alpha channel, then the computed linear luminance value is multiplied by the corresponding alpha value to produce the mask value.

４チャンネル RGBA グラフィックスオブジェクトがマスクとして用いられる場合、マスクの色チャンネルとアルファチャンネルの両方がマスク演算に寄与する。現在のオブジェクトの背景への合成に利用されるアルファマスクは、色チャンネルの輝度（前の段落を見よ）とマスクによるアルファチャンネルとの積を表現する。

For a four-channel RGBA graphics object that is used as a mask, both the color channels and the alpha channel of the mask contribute to the masking operation. The alpha mask that is used to composite the current object into the background represents the product of the luminance of the color channels (see previous paragraph) and the alpha channel from the mask.

３チャンネル RGB グラフィックスオブジェクトがマスクとして用いられる場合（例えば３チャンネル画像ファイルを参照しているときなど）の効果は、アルファチャンネルが一様に１にされた４チャンネル RGBA 画像に対するときと同じである。

For a three-channel RGB graphics object that is used as a mask (e.g., when referencing a 3-channel image file), the effect is as if the object were converted into a 4-channel RGBA image with the alpha channel uniformly set to 1.

単チャンネル画像がマスクとして用いられる場合（例えば１チャンネルグレースケール画像ファイルを参照しているときなど）の効果は、参照されたオブジェクトの単チャンネルを基に色チャンネルの算出を行い、アルファチャンネルが一様に１にされた、４チャンネル RGBA 画像へ変換されたものに対するときと同じである。グレースケール画像ファイルを参照する場合は、色チャンネルの計算において、エンコードされたグレースケール値を線型明度値（ linear light values ）に関連付ける変換曲線（ transfer curve ）を考慮しなければならないことに注意。

For a single-channel image that is used as a mask (e.g., when referencing a 1-channel grayscale image file), the effect is as if the object were converted into a 4-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. Note that 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.

マスクの効果は、マスクがないときに、与えられたオブジェクトのアルファチャンネルに対しマスクの実効アルファ値（ resulting alpha values - 即ちマスクの色チャンネルとアルファチャンネルの積をとったものによるマスクの輝度）による積をとることと同じである。

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 alpha values (i.e., the product of the mask's luminance from its color channels multiplied by the mask's alpha channel).

マスク演算においては、 SVG の 'path', 基本図形（例えば 'circle'）, 'text' は常に４チャンネル RGBA 画像として扱われることに注意。

Note that SVG 'path''s, shapes (e.g., 'circle') and 'text' are all treated as four-channel RGBA images for the purposes of masking operations.

Example mask01 では矩形をマスクする画像を利用している。

Example mask01 uses an image to mask a rectangle.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="3cm" viewBox="0 0 800 300" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Example mask01 - 赤い背景の上の
          グラデーションによるマスクがかけられた青色のテキスト
  </desc>
  <defs>
    <linearGradient id="Gradient" gradientUnits="userSpaceOnUse"
                    x1="0" y1="0" x2="800" y2="0">
      <stop offset="0" stop-color="white" stop-opacity="0" />
      <stop offset="1" stop-color="white" stop-opacity="1" />
    </linearGradient>
    <mask id="Mask" maskUnits="userSpaceOnUse"
          x="0" y="0" width="800" height="300">
      <rect x="0" y="0" width="800" height="300" fill="url(#Gradient)"  />
    </mask>
    <text id="Text" x="400" y="200" 
          font-family="Verdana" font-size="100" text-anchor="middle" >
      Masked text
    </text>
  </defs>
  <!-- 背景に薄赤色の矩形を描く -->
  <rect x="0" y="0" width="800" height="300" fill="#FF8080" />
  
  <!-- 同じテキストを二度描く。最初のものは内部を青色に塗りマスクを適用。
       二番目のものは外形線のみを黒色に塗り、マスクは適用しない。 -->
  <use xlink:href="#Text" fill="blue" mask="url(#Mask)" />
  <use xlink:href="#Text" fill="none" stroke="black" stroke-width="2" />
</svg>

Example mask01

この例を SVG で見る（ SVG 対応ブラウザのみ）
 

<!ENTITY % SVG.mask.extra.content "" >
<!ENTITY % SVG.mask.element "INCLUDE" >
<![%SVG.mask.element;[
<!ENTITY % SVG.mask.content
    "( %SVG.Description.class; | %SVG.Animation.class; %SVG.Structure.class;
       %SVG.Conditional.class; %SVG.Image.class; %SVG.Style.class;
       %SVG.Shape.class; %SVG.Text.class; %SVG.Marker.class;
       %SVG.ColorProfile.class; %SVG.Gradient.class; %SVG.Pattern.class;
       %SVG.Clip.class; %SVG.Mask.class; %SVG.Filter.class; %SVG.Cursor.class;
       %SVG.Hyperlink.class; %SVG.View.class; %SVG.Script.class;
       %SVG.Font.class; %SVG.Extensibility.class; %SVG.mask.extra.content; )*"
>
<!ELEMENT %SVG.mask.qname; %SVG.mask.content; >
<!-- end of SVG.mask.element -->]]>
<!ENTITY % SVG.mask.attlist "INCLUDE" >
<![%SVG.mask.attlist;[
<!ATTLIST %SVG.mask.qname;
    %SVG.Core.attrib;
    %SVG.Conditional.attrib;
    %SVG.Style.attrib;
    %SVG.Presentation.attrib;
    %SVG.External.attrib;
    x %Coordinate.datatype; #IMPLIED
    y %Coordinate.datatype; #IMPLIED
    width %Length.datatype; #IMPLIED
    height %Length.datatype; #IMPLIED
    maskUnits ( userSpaceOnUse | objectBoundingBox ) #IMPLIED
    maskContentUnits ( userSpaceOnUse | objectBoundingBox ) #IMPLIED
>

祖先の プロパティ は 'mask' 要素に継承されるが、 'mask' 要素を参照している要素からは継承されない。

Properties inherit into the 'mask' element from its ancestors; properties do not inherit from the element referencing the 'mask' element.

'mask' 要素は決して直接描画されることはなく、 'mask' プロパティによって参照されること以外に使い道はない。 'display' プロパティは 'mask' 要素に適用されることはなく、たとえ 'display' プロパティが none 以外の値に設定されていても 'mask' 要素が直接描画されることはないし、 'mask' 要素またはその祖先要素の 'display' プロパティの値が none であっても 'mask' 要素を参照して利用することができる。

'mask' elements are never rendered directly; their only usage is as something that can be referenced using the 'mask' property. The 'display' property does not apply to the 'mask' element; thus, 'mask' elements are not directly rendered even if the 'display' property is set to a value other than none, and 'mask' elements are available for referencing even when the 'display' property on the 'mask' element or any of its ancestors is set to none.

以下は 'mask' プロパティについての記述である。

The following is a description of the 'mask' property.

<uri>

マスクとして利用する他のグラフィックスオブジェクトへの URI 参照 。

A URI reference to another graphical object which will be used as the mask.

14.5 オブジェクト／グループ不透明度：'opacity' プロパティ

SVG にはいくつかの不透明度プロパティがある：

There are several opacity properties within SVG:

• フィル不透明度（'fill-opacity'）
• Fill opacity
• ストローク不透明度（'stroke-opacity'）
• Stroke opacity
• グラデーションストップ不透明度
• Gradient stop opacity
• オブジェクト／グループ不透明度（ここで述べる）
• Object/group opacity (described here)

オブジェクト／グループ不透明度（下で説明する）を除く他の全ての不透明度プロパティは中間描画演算に伴うものである。オブジェクト／グループ不透明度は後処理演算と考えることができる。概念的には、オブジェクト／グループが RGBA オフスクリーン画像に描画されるされた後で、オブジェクト／グループ不透明度の設定によりどのようにオフスクリーン画像を現在の背景に混色するかが定まる。

Except for object/group opacity (described just below), all other opacity properties are involved in intermediate rendering operations. Object/group opacity can be thought of conceptually as a postprocessing operation. Conceptually, after the object/group is rendered into an RGBA offscreen image, the object/group opacity setting specifies how to blend the offscreen image into the current background.

<opacity-value>

不透明度の設定はオブジェクト全体にわたって一様に適用される。値 0.0 （完全透明）から 1.0 （完全不透明）の範囲外の値はこの範囲に切り上げ／下げされる（ 特定の範囲への値の切り上げ／下げ を見よ）。オブジェクトが 'g' のようなコンテナ要素ならば、 'g' の内容が、各画素が値 <opacity-value> であるようなマスクを用いて現在の背景に混色される（ 単純アルファ合成 を見よ）。

The uniform opacity setting to be applied across an entire object. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range. (See Clamping values which are restricted to a particular range.) If the object is a container element such as a 'g', then the effect is as if the contents of the 'g' were blended against the current background using a mask where the value of each pixel of the mask is <opacity-value>. (See Simple alpha compositing.)

Example opacity01 は、要素とグループにおける 'opacity' プロパティの様々な利用を示している。

Example opacity01, illustrates various usage of the 'opacity' property on elements and groups.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="12cm" height="3.5cm" viewBox="0 0 1200 350"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Example opacity01 - 不透明度プロパティ</desc>
  <rect x="1" y="1" width="1198" height="348"
        fill="none" stroke="blue" />
  <!-- 背景の青色矩形 -->
  <rect x="100" y="100" width="1000" height="150" fill="#0000ff"  />
  <!-- 不透明からほぼ透明に近づいていく赤色の円 -->
  <circle cx="200" cy="100" r="50" fill="red" opacity="1"  />
  <circle cx="400" cy="100" r="50" fill="red" opacity=".8"  />
  <circle cx="600" cy="100" r="50" fill="red" opacity=".6"  />
  <circle cx="800" cy="100" r="50" fill="red" opacity=".4"  />
  <circle cx="1000" cy="100" r="50" fill="red" opacity=".2"  />
  <!-- 不透明なグループと不透明な円 -->
  <g opacity="1" >
    <circle cx="182.5" cy="250" r="50" fill="red" opacity="1"  />
    <circle cx="217.5" cy="250" r="50" fill="green" opacity="1"  />
  </g>
  <!-- グループ不透明度 0.5, 不透明な円 -->
  <g opacity=".5" >
    <circle cx="382.5" cy="250" r="50" fill="red" opacity="1"  />
    <circle cx="417.5" cy="250" r="50" fill="green" opacity="1"  />
  </g>
  <!-- 不透明なグループ, 半透明な赤色の上の半透明な緑色 -->
  <g opacity="1" >
    <circle cx="582.5" cy="250" r="50" fill="red" opacity=".5"  />
    <circle cx="617.5" cy="250" r="50" fill="green" opacity=".5"  />
  </g>
  <!-- 不透明なグループ, 半透明な緑色の上の半透明な赤色 -->
  <g opacity="1" >
    <circle cx="817.5" cy="250" r="50" fill="green" opacity=".5"  />
    <circle cx="782.5" cy="250" r="50" fill="red" opacity=".5"  />
  </g>
  <!-- グループ不透明度 0.5, 半透明な赤色の上の半透明な緑色 -->
  <g opacity=".5" >
    <circle cx="982.5" cy="250" r="50" fill="red" opacity=".5"  />
    <circle cx="1017.5" cy="250" r="50" fill="green" opacity=".5"  />
  </g>
</svg>

Example opacity01

この例を SVG で見る（ SVG 対応ブラウザのみ）
 

上の例では画像の上段の円はそれぞれ異なる 1.0 から 0.2 の不透明度を持っている。画像の下段に対応する５つの 'g' 要素それぞれは次の様な部分的に重なる赤色と緑色の円を含んでいる：

In the example above, the top row of circles have differing opacities, ranging from 1.0 to 0.2. The bottom row illustrates five 'g' elements, each of which contains overlapping red and green circles, as follows:

• 最初のグループでは基準となる不透明な場合を示している。グループと円の両方とも不透明度は 1 である。
• The first group shows the opaque case for reference. The group has opacity of 1, as do the circles.
• ２番目のグループはグループ内の要素が不透明なときのグループ不透明度の効果を示している。
• The second group shows group opacity when the elements in the group are opaque.
• ３番目と４番目のグループは（描画順序において）不透明度が非可換なことを示している。３番目のグループ（不透明度 1 ）では、半透明の緑色の円が半透明の赤色の円の上に描かれている一方で、４番目のグループでは逆の順序で描かれている。２つの円が交わる領域で異なった色（３番目では濃い緑色である一方、４番目では濃い赤色）になっていることに注意。
• The third and fourth group show that opacity is not commutative. In the third group (which has opacity of 1), a semi-transparent green circle is drawn on top of a semi-transparent red circle, whereas in the fourth group a semi-transparent red circle is drawn on top of a semi-transparent green circle. Note that area where the two circles intersect display different colors. The third group shows more green color in the intersection area, whereas the fourth group shows more red color.
• ５番目のグループは不透明度を累積した場合の効果を示している。円とグループ自身の両方とも不透明度 0.5 である。緑色の円と重ならない赤色の円の領域（赤色の円の左側）の上側は累積不透明度 0.25 （= 0.5 * 0.5 ）で青色の矩形に混色された結果、赤色が 25%, 青色が 75% になっている。
• The fifth group shows the multiplicative effect of opacity settings. Both the circles and the group itself have opacity settings of .5. The result is that the portion of the red circle which does not overlap with the green circle (i.e., the top/right of the red circle) will blend into the blue rectangle with accumulative opacity of .25 (i.e., .5*.5), which, after blending into the blue rectangle, results in a blended color which is 25% red and 75% blue.

14.9 DOM インターフェース

次に挙げるインターフェースが以下で定義される： SVGClipPathElement, SVGMaskElement

インターフェース SVGClipPathElement

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

IDL 定義

interface SVGClipPathElement : 
                SVGElement,
                SVGTests,
                SVGLangSpace,
                SVGExternalResourcesRequired,
                SVGStylable,
                SVGTransformable,
                SVGUnitTypes { 
  readonly attribute SVGAnimatedEnumeration clipPathUnits;
};

属性

readonly SVGAnimatedEnumeration clipPathUnits

'clipPath' 要素の clipPathUnits 属性に対応する。 SVGUnitTypes で定義されている定数のいずれか。

インターフェース SVGMaskElement

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

IDL 定義

interface SVGMaskElement : 
                SVGElement,
                SVGTests,
                SVGLangSpace,
                SVGExternalResourcesRequired,
                SVGStylable,
                SVGUnitTypes { 
  readonly attribute SVGAnimatedEnumeration maskUnits;
  readonly attribute SVGAnimatedEnumeration maskContentUnits;
  readonly attribute SVGAnimatedLength      x;
  readonly attribute SVGAnimatedLength      y;
  readonly attribute SVGAnimatedLength      width;
  readonly attribute SVGAnimatedLength      height;
};

属性

readonly SVGAnimatedEnumeration maskUnits

'mask' 要素の maskUnits 属性に対応する。 SVGUnitTypes で定義されている定数のいずれか。

readonly SVGAnimatedEnumeration maskContentUnits

'mask' 要素の maskContentUnits 属性に対応する。 SVGUnitTypes で定義されている定数のいずれか。

readonly SVGAnimatedLength x

'mask' 要素の x 属性に対応する。

readonly SVGAnimatedLength y

'mask' 要素の y 属性に対応する。

readonly SVGAnimatedLength width

'mask' 要素の width 属性に対応する。

readonly SVGAnimatedLength height

'mask' 要素の height 属性に対応する。