精图规范1.0----14 剪裁、蒙版和合成 Clipping, Masking and Compositing

previous next   contents   elements   attributes   properties   index  

---

04 September 2001

14 剪裁、蒙版和合成 Clipping, Masking and Compositing

内容 Contents

• 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 属性越界'overflow' 和剪裁'clip'  The 'overflow' and 'clip' properties
  • 14.3.4 剪裁到视口与剪裁到viewBox Clip to viewport vs. clip to viewBox
  • 14.3.5 建立一个新的剪裁路径 Establishing a new clipping path
• 14.4 蒙版 Masking
• 14.5 对象和分组不透明度: 特性 'opacity' Object and group opacity: the 'opacity' property
• 14.6 文档对象模型接口 DOM interfaces

 

14.1 引言 Introduction

精图支持下列剪裁/蒙版特征:  SVG supports thefollowing clipping/masking features:

• 剪裁路径, 使用'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
• 蒙版, 是一种容器元素 它可以包含图形元素 或其它容器元素, 它定义一组图形用作将前景对象合成到当前背景中的半透明蒙版.    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.

剪裁路径和蒙版的关键不同是剪裁路径是一种硬性的蒙版(即，轮廓由要么为完全不透明的像素要么为完全透明的像素组成, 沿着轮廓的边缘可能不是反锯齿的)而蒙版则由一种每个像素带有透明度的图像组成. 在一个蒙版中, 每一个像素值可以从完全透明到完全不透明.   Onekey distinction between aclipping path and a mask is that clipping paths are hard masks (i.e., the silhouetteconsists of either fully opaque pixels or fully transparent pixels, with thepossible exception of anti-aliasing along the edge of the silhouette) whereasmasks consist of an image where each pixel value indicates the degree oftransparency vs. opacity. In a mask, each pixel value can range from fullytransparent to fully opaque.

精图仅支持简单α混合合成(参见简单的α合成 ).SVG supports only simple alpha blending compositing (seeSimple Alpha Compositing).

14.2 简单的α合成 Simple alpha compositing

如果图形元素与在画布中已经进行渲染的元素用简单的alpha合成进行混合的话, 那么任何给定的像素的颜色值和透明度可按下列公式计算(所有的颜色值预先乘以alpha值):Graphics elements are blendedinto 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 isthe result of the following formulas (all color values use premultipliedalpha):

Er, Eg, Eb    - 元素的颜色值 Element color value

Ea            - 元素的alpha值 Element alpha value

Cr, Cg, Cb    - 画布的颜色值(在混合之前)Canvas color value (before blending)

Ca            - 画布的alpha值(在混合之前)Canvas alpha value (before blending)

Cr', Cg', Cb' - 画布的颜色值(在混合之后)Canvas color value (after blending)

Ca'           - 画布的alpha值(在混合之后)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 provideinformation about the color space in which to perform the compositingoperations, apply to compositing operations:

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

14.3 剪裁路径 Clipping paths

14.3.1 引言 Introduction

剪裁路径限制用于绘图的区域.从概念上来说, 任何位于由当前活动剪裁路径界定的区域的外部所绘制的任何部分将不被真正绘制出来. 可以将剪裁路径看成一种特殊的蒙版在剪裁路径的外部像素为黑色并且透明度为0而内部像素为白色且透明度为1(沿着轮廓的边缘可能不是反锯齿的).The clipping pathrestricts the region to which paint can be applied. Conceptually, any parts ofthe drawing that lie outside of the region bounded by the currently activeclipping path are not drawn. A clipping path can be thought of as a maskwherein those pixels outside the clipping path are black with an alpha value ofzero and those pixels inside the clipping path are white with an alpha value ofone (with the possible exception of anti-aliasing along the edge of thesilhouette).

14.3.2 初始剪裁路径 The initial clipping path

当一个精图元素 'svg' 要么为文档的根元素要么为嵌入一个布局由CSS 或XSL的布局规则确定的文档中时, 则用户代理必须为此文档片段建立一个初始剪裁路径.属性 'overflow' 和 'clip'  与附加的精图用户代理的处理规则一起确定用户代理为此文档片段建立的初始剪裁路径:  When an'svg' element is either the root element in thedocument or is embedded within a document whose layout is determined accordingto the layout rules of CSS or XSL, then the user agent must establish aninitial clipping path for the SVG document fragment. The 'overflow'and 'clip' properties along with additional SVGuser agent processing rules determine the initial clipping path which the useragent establishes for the SVG document fragment:

14.3.3 属性越界'overflow' 和剪裁'clip'  The 'overflow' and 'clip' properties

'overflow'

Value:	visible | hidden | scroll | auto | inherit
Initial:	see prose
Applies to:	elements which establish a new viewport,'pattern' elements and 'marker' elements
Inherited:	no
Percentages:	N/A
Media:	visual
Animatable:	yes

属性覆盖'overflow' 与[CSS2-overflow]中所定义的具有相同的参数值和相同的意义 ;不过应用下列额外的几点:
The 'overflow' property has the same parametervalues and has the same meaning as defined in ; however, the followingadditional points apply:  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 toelements 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).
• 在精图内容的内部, 值 auto 等价于值 visible.  Within SVG content, the value auto is equivalent to the value visible.
• 当一个最外部的精图'svg' 元素以内联的方式嵌入一使用CSS 布局[CSS2-LAYOUT]或XSL格式化[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 initialviewport; otherwise, the initial clipping path is set according to the clipping rules as defined in [CSS2-overflow].
• 当最外部的精图精图 'svg' 元素是独立的或以内联的方式嵌入一不使用CSS 布局 [CSS2-LAYOUT]或 XSL格式化 [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 initialviewport.
• 定义在[CSS2-overflow]中的 'overflow' 的初始值为'visible'；可是，精图的用户代理样式表可以不顾这一初始值并根据建立新视口的元素 (例如, 'svg' 元素)设置特性 'overflow' ，'pattern' 元素和'marker'元素相应的特性值为'hidden'.     The initial value for 'overflow' as defined in [CSS2-overflow] is 'visible'; however, SVG'suser agent style sheet overrides this initial value and set the 'overflow' property onelements that establish new viewports (e.g., 'svg' elements), 'pattern' elements and 'marker' elements to the value 'hidden'.

作为上述所述的结果，精图用户代理的缺省行为是建立剪裁路径为初始视口的边界并且为每个建立新视口的元素和每个'pattern' 和'marker' 元素建立一个新的剪裁路径。As a result of the above, the default behavior of SVG user agents isto establish a clipping path to the bounds of the initial viewport andto establish a new clipping path for each elementwhich establishes a new viewport and each 'pattern' and 'marker' element.

关于相关的信息，请参见剪裁到视口与剪裁到 viewBox的比较.  For related information, seeClipto viewport vs. clip to viewBox.

'clip'

Value:	<shape> | auto | inherit
Initial:	auto
Applies to:	elements which establish a new viewport,'pattern' elements and 'marker' elements
Inherited:	no
Percentages:	N/A
Media:	visual
Animatable:	yes

特性 'clip' 与在[CSS2-clip]中所定义的具有相同的参数值。在当前用户坐标上表示的无单位的值被允许作为<shape>中的坐标值。值"auto" 定义一个沿着由给定元素所创建的视口的边界的剪裁路径。  The'clip' property has the same parameter values asdefined in [CSS2-clip].Unitless values, which indicate current user coordinates, are permitted on thecoordinate values on the <shape>. The value of "auto" defines aclipping path along the bounds of the viewport created by the given element.

14.3.4 剪裁到视口与剪裁到viewBox Clip to viewport vs.clip to viewBox

值得注意的是特性 'overflow' 和特性'clip' 的初始值以及用户代理样式表将导致一个初始的剪裁路径被设置为初始视口的边界。当指定属性viewBox 和preserveAspectRatio时，有时期望剪裁路径设置为viewBox 的边界而不是视口(或者引用矩形 , 在  'marker' 和'pattern' 元素的情况下)的边界，特别当preserveAspectRatio属性指定均匀缩放并且viewBox的屏幕高宽比与视口的屏幕高宽比不同时。It is important to note that initial values for the 'overflow' and 'clip' properties and the user agent stylesheet will result in an initial clipping path that is set to the bounds ofthe initial viewport. When attributesviewBox and preserveAspectRatio attributes are specified, it issometime desirable that the clipping path be set to the bounds of theviewBox instead of the viewport (or referencerectangle, in the case of 'marker' and 'pattern' elements), particularly when preserveAspectRatio specifies uniform scaling andthe aspect ratio of the viewBox does not match the aspect ratio of theviewport.

为了设置初始的剪切路径为viewBox的边界，设置特性'clip'的边界为在属性viewBox所指定的相同矩形。 (注意参数的不匹配。'clip'取值<top>, <right>,<bottom> 和 <left>，而viewBox取值<min-x>, <min-y>, <width> 和 <height>.)  To set theinitial clipping path to the bounds of theviewBox, set the bounds of 'clip' property to the same rectangle as specifiedon the viewBox attribute. (Note that the parameters do notmatch. 'clip' takes values <top>,<right>,<bottom> and <left>, whereas viewBox takes values <min-x>, <min-y>,<width> and <height>.)

14.3.5 建立一个新的剪裁路径 Establishing a new clipping path

一个剪裁路径通过一个'clipPath'元素来定义。可以通过特性'clip-path' 来引用一个剪裁路径。Aclipping path is defined with a 'clipPath'element. A clipping path is used/referenced using the 'clip-path'property.

一个剪裁元素可以包含路径'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, itmust directly reference'path', 'text' or basic shape elements.Indirect references are an error (see Errorprocessing).

在 一个'clipPath' 元素内的除了比如 'fill', 'stroke', 'stroke-width' 等渲染特性外的每个子元素的原始几何形状从概念上定义了一个1-位的蒙版(可能排除沿着此几何形状的边缘的反锯齿)此蒙版表示与此元素相关的图形的轮廓。任何此对象的轮廓线外部将被蒙版去除掉。当剪裁路径 'clipPath' 元素包含多个子元素时，这些子元素通过逻辑或的方式组合成一个单一的轮廓，此轮廓被用来限制进行绘制的区域。于是，如果一点处于'clipPath'的子元素的内部，则此点处于剪裁路径的内部。The rawgeometry 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-aliasingalong the edge of the geometry) which represents the silhouette of the graphicsassociated with that element. Anything outside the outline of the object ismasked out. When the 'clipPath' elementcontains multiple child elements, the silhouettes of the child elements arelogically OR'd together to create a single silhouette which is then used torestrict the region onto which paint can be applied. Thus, a point is insidethe 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 orif the referenced object is not a 'clipPath'element (seeErrorprocessing).

对于一个给定的图形元素，实际使用的剪裁路径将由此元素的特性'clip-path' 所指定的剪裁路径(如果存在的话)与其祖先上的剪裁路径的交构成，祖先上的剪裁路径由祖先元素的特性'clip-path' 或者由祖先元素其建立一个新视口的特性'overflow' 所指定。(也请参见 初始剪裁路径中的讨论.)  For a given graphicselement, the actual clipping path used will be the intersection of the clippingpath specified by its'clip-path' property (if any) with any clippingpaths on its ancestors, as specified by the'clip-path' property on the ancestor elements, or bythe 'overflow' property on ancestor elementswhich establish a new viewport. Also, see the discussion of theinitial clipping path.)

两点注记： A coupleof notes:

• 剪裁路径 'clipPath' 元素本身和它的子元素不从此'clipPath' 元素的祖先处继承剪裁路径。The 'clipPath' element itself and its child elements donot inherit clipping paths from the ancestors of the 'clipPath' element.
• 剪裁路径 'clipPath' 元素或其任何子元素可以指定特性'clip-path'. The 'clipPath' element or any of its children can specify property'clip-path'.
  如果在剪裁路径 'clipPath' 元素上安置了一个有效的 'clip-path' 引用，则结果剪裁路径为剪裁路径 'clipPath' 元素的内容和引用的剪裁路径的交。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.
  如果在剪裁路径 'clipPath' 元素的一个子元素具有一个有效的 'clip-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 % clipPathExt "" > <!ELEMENT clipPath (%descTitleMetadata;,                     (path|text|rect|circle|ellipse|line|polyline|polygon|                      use|animate|set|animateMotion|animateColor|animateTransform                      %ceExt;%clipPathExt;)*) > <!ATTLIST clipPath   %stdAttrs;   %testAttrs;   %langSpaceAttrs;   externalResourcesRequired %Boolean; #IMPLIED   class %ClassList; #IMPLIED   style %StyleSheet; #IMPLIED   %PresentationAttributes-Color;   %PresentationAttributes-FillStroke;   %PresentationAttributes-FontSpecification;   %PresentationAttributes-Graphics;   %PresentationAttributes-TextContentElements;   %PresentationAttributes-TextElements;   transform %TransformList; #IMPLIED   clipPathUnits (userSpaceOnUse | objectBoundingBox) #IMPLIED >

属性定义: Attribute definitions:

clipPathUnits ="userSpaceOnUse |objectBoundingBox"

为'clipPath'的内容指定坐标系。Defines the coordinatesystem for the contents of the 'clipPath'.
如果clipPathUnits="userSpaceOnUse"，那么在 'clipPath' 元素被引用时在引用的地方 'clipPath' 的内容按照当前坐标系来表示(即,  经由 特性 'clip-path' 引用此'clipPath'元素的元素的用户坐标系).   If clipPathUnits="userSpaceOnUse", the contentsof the 'clipPath' represent values in thecurrent user coordinate system in place at the time when the 'clipPath' element is referenced (i.e., the usercoordinate system for the element referencing the 'clipPath'element via the 'clip-path' property).
如果clipPathUnits="objectBoundingBox"，那么根据此剪裁路径对其进行剪裁的元素的边框所建立的用户坐标系作为此'clipPath'元素的内容的坐标系(参见对象边框单位). If clipPathUnits="objectBoundingBox",then the user coordinate system for the contents of the 'clipPath' element isestablished using the bounding box of the element to which the clipping path isapplied (seeObjectbounding box units).
如果不指定属性clipPathUnits，那么其效果相当于其值被指定为userSpaceOnUse。If attribute clipPathUnitsis not specified, then the effect is as if a value of userSpaceOnUsewere specified.
Animatable:yes.

 

在别处定义的属性: Attributes defined elsewhere:

%stdAttrs;,%testAttrs;,%langSpaceAttrs;,externalResourcesRequired,class,style, %PresentationAttributes-Color;,%PresentationAttributes-FillStroke;,%PresentationAttributes-FontSpecification;,%PresentationAttributes-Graphics;,%PresentationAttributes-TextContentElements;,%PresentationAttributes-TextElements;,transform.

剪裁路径'clipPath'元素从它的祖先处继承特性，而不从引用此剪裁路径'clipPath'元素的元素处继承特性。Propertiesinherit into the 'clipPath' element from itsancestors; properties do not inherit from the element referencing the 'clipPath' element.

剪裁路径'clipPath'元素决不会被直接渲染，它们唯一的用处在于有时被特性'clip-path' 所引用。特性'display' 不能用于元素，于是，即使设置特性为非none的值剪裁路径'clipPath'元素也不被直接渲染，并且剪裁路径'clipPath'元素可以用于渲染即使当在此剪裁路径'clipPath'元素上或其祖先上的特性设置为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.

 

'clip-path'

Value:	<uri> | none |inherit
Initial:	none
Applies to:	container elements andgraphics elements
Inherited:	no
Percentages:	N/A
Media:	visual
Animatable:	yes

<uri>

指向在同一精图文档片段的另一个图形对象可以作为剪裁路径的一个URI引用 。  AURIreference to another graphical object within the same SVG document fragmentwhich will be used as the clipping path.

'clip-rule'

Value:	nonzero | evenodd | inherit
Initial:	nonzero
Applies to:	graphics elements within a 'clipPath' element
Inherited:	yes
Percentages:	N/A
Media:	visual
Animatable:	yes

nonzero

参见特性'fill-rule' 的描述.  See description of'fill-rule' property.

evenodd

参见特性'fill-rule' 的描述.  See description of'fill-rule' property.

特性'clip-rule' 只用于包含在一个剪裁路径'clipPath'元素内的图形元素。下列代码片段将导致将一种奇偶剪裁规则用于剪裁路径因为在'path' 元素（此元素定义剪裁形状）上指定了'clip-rule' :   The 'clip-rule' propertyonly applies to graphics elements that are contained within a 'clipPath' element. The following fragment ofcode will cause an evenodd clipping rule to be applied to the clipping pathbecause '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' 是在引用元素上指定的而不是在定义剪裁形状的对象上指定的。whereasthe following fragment of code willnot cause an evenodd clipping ruleto be applied because the 'clip-rule' is specifiedon 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 蒙版 Masking

在精图中，为了将当前对象合成到背景上可以指定任何一个其它的图形对象或'g' 元素作为其alpha蒙版。In SVG, you can specify that anyother graphics object or 'g' element can beused as an alpha mask for compositing the current object into the background.

一个蒙版通过一个蒙版 'mask' 元素来定义。一个蒙版通过蒙版'mask' 特性来引用。A maskis defined with a 'mask' element. A mask isused/referenced using the 'mask' property.

一个蒙版可以包含任何图形对象或 容器元素比如 'g'. A 'mask' can contain any graphical elements or containerelements such as a 'g'.

如果特性'mask'引用了一个不存在的对象或者所引用的对象不是一个蒙版'mask'元素，那么便导致一个错误(参见 错误处理)。  It is an error if the 'mask' property references a non-existent object or ifthe referenced object is not a 'mask' element(seeErrorProcessing).

蒙版的效果是好像将蒙版'mask' 的子元素渲染到一个被初始化为透明黑色的离屏图像上。任何引用此给定蒙版'mask' 元素的图形对象将被绘制到透过此蒙版的背景上，于是图形对象的部分被完全或部分蒙掉。The effect is as if the child elements of the 'mask' are rendered into an offscreen image which hasbeen initialized to transparent black. Any graphical object whichuses/references the given 'mask' element willbe painted onto the background through the mask, thus completely or partiallymasking out parts of the graphical object.

对于任何用作蒙版的图形对象，在任何点的蒙版值依据以下方式从颜色通道值和alpha通道值计算出来。一个线性亮度值从颜色通道值计算而来。例如，这可以通过下列方式做到。先转换原始图像颜色值(潜在地为sRGB颜色空间) 到线性RGB颜色空间 (参见渲染特性).然后，使用未分解的线性RGB颜色值，并使用亮度到alpha系数(如'feColorMatrix' 基本滤镜中所设定的)将线性颜色值转换为线性亮度值。如果此图形对象包含一个alpha通道，那么计算出的亮度值与此alpha值相乘得出最后的蒙版值。 For any graphics objectthat is used as a mask, the mask value at any point is computed from the colorchannel values and alpha channel value as follows. A linear luminance value iscomputed from the color channel values. This can be done, for example, by firstconverting the original image color values (potentially in the sRGB colorspace) to the linear RGB color space (seeRenderingproperties). Then, using non-premultiplied linear RGB color values, applythe luminance-to-alpha coefficients (as defined in the'feColorMatrix' filter primitive) to convert thelinear RGB color values to linear luminance values. If the graphics object alsoincludes an alpha channel, then the computed linear luminance value ismultiplied by the corresponding alpha value to produce the mask value.

对于用作蒙版的四通道RGBA图形对象，蒙版的颜色通道和alpha通道对于蒙版操作都有贡献。合成当前对象到背景上的alpha蒙版表示颜色通道的亮度(参见以前的章节)与蒙版的alpha通道的乘积。For a four-channel RGBAgraphics object that is used as a mask, both the color channels and the alphachannel of the mask contribute to the masking operation. The alpha mask that isused to composite the current object into the background represents the productof the luminance of the color channels (see previous paragraph) and the alphachannel from the mask.

对于用作蒙版的三通道RGB图形对象(例如, 当引用一个3通道图像文件),其效果相当于将此对象转换为其alpha通道均设置为1的4通道RGBA图像。 For athree-channel RGB graphics object that is used as a mask (e.g., when referencinga 3-channel image file), the effect is as if the object were converted into a4-channel RGBA image with the alpha channel uniformly set to 1.

对于用作蒙版的单通道图像 (例如, 当引用一个1通道的灰度图像文件时)，其效果相当于此图像被转换为一个4通道RGBA图像，此时所引用对象的单通道用于计算三个颜色通道而alpha通道均设置为1。注意当引用一个灰度图像文件时，当计算颜色通道时必须考虑编码灰度值到线性亮度值的转换曲线。For a single-channel image that is used as a mask (e.g., whenreferencing a 1-channel grayscale image file), the effect is as if the objectwere converted into a 4-channel RGBA image, where the single channel from thereferenced object is used to compute the three color channels and the alphachannel is uniformly set to 1. Note that when referencing a grayscale imagefile, the transfer curve relating the encoded grayscale values to linear lightvalues must be taken into account when computing the color channels.

蒙版的效果与不用蒙版而通过给定对象的alpha通道与蒙版的结果alpha值(即, 蒙版的颜色通道所决定的亮度与蒙版的alpha通道的乘积)的乘积所给出的效果是相同的。The effect of a maskis identical to what would have happened if there were no mask but instead thealpha channel of the given object were multiplied with the mask's resultingalpha values (i.e., the product of the mask's luminance from its color channelsmultiplied by the mask's alpha channel).

注意用于蒙版操作的精图的'路径'，形状 (例如, '圆')和'文本'都被作为四通道的RGBA图像对待。Note that SVG 'path''s, shapes(e.g., 'circle') and 'text' are all treated as four-channel RGBA images for thepurposes of masking operations.

例子mask01 用一个图像蒙版一个矩形。Example mask01 uses an image to mask a rectangle.

<?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="8cm" height="3cm" viewBox="0 0 800 300"

     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <desc>Example mask01 - blue text masked with gradient against red background

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

  <!-- Draw a pale red rectangle in the background -->

  <rect x="0" y="0" width="800" height="300" fill="#FF8080" />

  <!-- Draw the text string twice. First, filled blue, with the mask applied.

       Second, outlined in black without the mask. -->

  <use xlink:href="#Text" fill="blue" mask="url(#Mask)" />

  <use xlink:href="#Text" fill="none" stroke="black" stroke-width="2" />

</svg>

Example mask01

View thisexample as SVG (SVG-enabled browsers only)
 

<!ENTITY % maskExt "" > <!ELEMENT mask (desc|title|metadata|defs|                    path|text|rect|circle|ellipse|line|polyline|polygon|                    use|image|svg|g|view|switch|a|altGlyphDef|                    script|style|symbol|marker|clipPath|mask|                    linearGradient|radialGradient|pattern|filter|cursor|font|                    animate|set|animateMotion|animateColor|animateTransform|                    color-profile|font-face                    %ceExt;%maskExt;)*  > <!ATTLIST mask   %stdAttrs;   %testAttrs;   %langSpaceAttrs;   externalResourcesRequired %Boolean; #IMPLIED   class %ClassList; #IMPLIED   style %StyleSheet; #IMPLIED   %PresentationAttributes-All;   maskUnits (userSpaceOnUse | objectBoundingBox) #IMPLIED   maskContentUnits (userSpaceOnUse | objectBoundingBox) #IMPLIED   x %Coordinate; #IMPLIED   y %Coordinate; #IMPLIED   width %Length; #IMPLIED   height %Length; #IMPLIED >

属性定义: Attribute definitions:

maskUnits = "userSpaceOnUse|objectBoundingBox"

指定属性x, y, width, height的坐标系。Defines the coordinate systemfor attributes x, y, width, height.
如果maskUnits="userSpaceOnUse",x, y, width, height 表示当'mask'元素被引用的时候所在地方在当前用户坐标系(即, 通过'mask'特性引用此 'mask' 元素的用户坐标系)中的值.   If maskUnits="userSpaceOnUse", x, y, width, height represent values in the current usercoordinate system in place at the time when the 'mask'element is referenced (i.e., the user coordinate system for the elementreferencing the 'mask' element via the 'mask' property).
如果maskUnits="objectBoundingBox", x, y, width, height 表示引用此蒙版的元素的边框的分数或百分数。(参见 对象边框单位.)  If maskUnits="objectBoundingBox", x, y, width, height represent fractions or percentagesof the bounding box of the element to which the mask is applied. (SeeObjectbounding box units.)
如果属性maskUnits不被指定，那么其效果相当其值为objectBoundingBox。Ifattribute maskUnits is not specified, then theeffect is as if a value of objectBoundingBox werespecified.
Animatable:yes.

maskContentUnits = "userSpaceOnUse |objectBoundingBox"

指定此'mask'的内容的坐标系。Defines the coordinatesystem for the contents of the 'mask'.
如果maskContentUnits="userSpaceOnUse", 此'mask'元素的内容所用的用户坐标系为当'mask'元素被引用的时候所在地方的当前用户坐标系(即, 通过'mask'特性引用此 'mask' 元素的用户坐标系). If maskContentUnits="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 usercoordinate system for the element referencing the 'mask'element via the 'mask' property).
如果maskContentUnits="objectBoundingBox", 此'mask'元素的内容所用的用户坐标系通过引用此蒙版的元素的边框来建立。(参见 对象边框单位.) If maskContentUnits="objectBoundingBox",the user coordinate system for the contents of the 'mask'is established using the bounding box of the element to which the mask isapplied. (SeeObjectbounding box units.)
如果不指定属性maskContentUnits，那么其效果相当其值为userSpaceOnUse。Ifattribute maskContentUnits is not specified, thenthe effect is as if a value of userSpaceOnUse werespecified.
Animatable:yes.

x = "<coordinate>"

用于最大可能离屏图像缓冲矩形的一角的x轴坐标。注意用于渲染在蒙版上的任何图形的剪裁路径为给定对象相关的当前剪裁路径与由x, y, width, height定义的矩形的交。The x-axis coordinate of onecorner of the rectangle for the largest possible offscreen buffer. Note thatthe clipping path used to render any graphics within the mask will consist ofthe intersection of the current clipping path associated with the given objectand the rectangle defined by x, y, width, height.
如果不指定属性，那么其效果相当于指定其值为"-10%"。If the attribute is not specified, the effect is as if a value of"-10%" were specified.
Animatable:yes.

y = "<coordinate>"

用于最大可能离屏图像缓冲矩形的一角的y轴坐标。The y-axiscoordinate of one corner of the rectangle for the largest possible offscreenbuffer.
如果不指定属性，那么其效果相当于指定其值为"-10%"。If the attribute is not specified, the effect is as if a value of"-10%" were specified.
Animatable:yes.

width = "<length>"

最大可能离屏图像缓冲的宽度。注意用于渲染在蒙版上的任何图形的剪裁路径为给定对象相关的当前剪裁路径与由x, y, width, height定义的矩形的交。The width of the largestpossible offscreen buffer. Note that the clipping path used to render anygraphics within the mask will consist of the intersection of the currentclipping path associated with the given object and the rectangle defined by x, y, width, height.
负值为一种错误(参见 错误处理).零值则不渲染此元素。Anegative value is an error (see Errorprocessing). A value of zero disables rendering of the element.
如果不指定属性，那么其效果相当于指定其值为"120%"。If the attribute is not specified, the effect is as if a value of"120%" were specified.
Animatable:yes.

height = "<length>"

最大可能离屏图像缓冲的高度。 The height of the largest possible offscreen buffer.
负值为一种错误(参见 错误处理).零值则不渲染此元素。Anegative value is an error (see Errorprocessing). A value of zero disables rendering of the element.
如果不指定属性，那么其效果相当于指定其值为"120%"。If the attribute is not specified, the effect is as if a value of"120%" were specified.
Animatable:yes.

 

在别处定义的属性: Attributes defined elsewhere:

%stdAttrs;,%testAttrs;,%langSpaceAttrs;,externalResourcesRequired,class,style, %PresentationAttributes-All;.

 'mask' 元素从其祖先处继承特性 ；而不从引用此'mask' 元素的元素那里继承特性。Propertiesinherit into the 'mask' element from itsancestors; properties do not inherit from the element referencing the 'mask' element.

'mask' 元素决不会直接进行渲染，它们唯一的用法是可以作为特性 'mask' 所引用的对象。特性'display' 不用于元素'mask' ；于是'mask' 元素不被直接渲染即使设置特性'display'的值为不为none的其它值，并且'mask' 元素可以被引用即使在'mask' 元素或它的任何祖先的特性'display'被设置为none。'mask'elements are never rendered directly; their only usage is as something that canbe 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.

'mask'

Value:	<uri> | none | inherit
Initial:	none
Applies to:	container elements andgraphics elements
Inherited:	no
Percentages:	N/A
Media:	visual
Animatable:	yes

<uri>

对另一个用于作为此蒙版的图形对象的URI引用 。 AURIreference to another graphical object which will be used as the mask.

14.5 对象和分组不透明度: 特性 'opacity'  Object and group opacity: the 'opacity'property

在精图中存在几种不透明度特性：There are several opacity properties within SVG:

• 填充不透明度 Fill opacity
• 描边不透明度 Stroke opacity
• 渐变关键点不透明度 Gradient stop opacity
• 对象/分组不透明度(这里所描述的)  Object/group opacity (described here)

除了对象/分组不透明度(正如下面所描述的)之外，所有其它不透明度特性都包含在中介渲染操作中。对象/分组不透明度可以从概念上看作是一种后处理操作。从概念上看来，在对象/分组被渲染到一个离屏图像上之后，对象/分组不透明度的设置指定了如何混合离屏图像到当前的背景上。  Except for object/group opacity(described just below), all other opacity properties are involved inintermediate rendering operations. Object/group opacity can be thought ofconceptually as a postprocessing operation. Conceptually, after theobject/group is rendered into an RGBA offscreen image, the object/group opacitysetting specifies how to blend the offscreen image into the current background.

'opacity'

Value:	<alphavalue> | inherit
Initial:	1
Applies to:	container elements andgraphics elements
Inherited:	no
Percentages:	N/A
Media:	visual
Animatable:	yes

<alphavalue>

相同的不透明度设置用于整个对象。任何在范围 0.0 (完全透明) to 1.0 (完全不透明) 之外的值将被钳制于此范围的值. (参见 限制在特定范围内的箝位值.)。如果对象为一个容器元素比如一个 'g'，那么其效果相当于此'g'的内容通过使用每个像素的值为<alphavalue>的蒙版与当前背景进行混合。(参见 简单的α合成.)  The uniform opacity setting to be applied across an entire object. Any valuesoutside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clampedto this range. (SeeClampingvalues which are restricted to a particular range.) If the object is acontainer element such as a'g', then the effect is as if the contents of the'g' were blended against the current backgroundusing a mask where the value of each pixel of the mask is <alphavalue>.(SeeSimplealpha compositing.)

例子 opacity01, 举例说明了在元素和分组上的特性'opacity'的各种用法.   Example opacity01, illustratesvarious usage of the 'opacity' property onelements 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 - opacity property</desc>

  <rect x="1" y="1" width="1198" height="348"

        fill="none" stroke="blue" />

  <!-- Background blue rectangle -->

  <rect x="100" y="100" width="1000" height="150" fill="#0000ff"  />

  <!-- Red circles going from opaque to nearly transparent -->

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

  <!-- Opaque group, opaque circles -->

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

  <!-- Group opacity: .5, opacity circles -->

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

  <!-- Opaque group, semi-transparent green over red -->

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

  <!-- Opaque group, semi-transparent red over green -->

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

  <!-- Group opacity .5, semi-transparent green over red -->

  <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

View thisexample as SVG (SVG-enabled browsers only)
 

在上面这个例子中，上面一排圆具有不同的不透明度，范围从1.0 到 0.2。下面一排举例说明五个'g' 元素，其中每个都包含部分重叠的红色和绿色的圆，说明如下：In the example above, the top row of circles have differingopacities, ranging from 1.0 to 0.2. The bottom row illustrates five 'g' elements, each of which contains overlappingred and green circles, as follows:

• 第一组说明所涉及的不透明的情形。分组具有不透明度1，所包含的圆本身的不透明度也为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.
• 第五组说明不透明度设置的累积效果。各圆和组本身的不透明度都设置为.5。其结果是红圆不与绿圆重叠的部分(即, 红圆的右上部)将以累积的不透明度 .25 (即, .5*.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.6 文档对象模型接口 DOM interfaces

下列接口将在下面定义： SVGClipPathElement, SVGMaskElement.  The followinginterfaces are defined below: SVGClipPathElement,SVGMaskElement.

 

接口SVGClipPathElement Interface SVGClipPathElement

接口 SVGClipPathElement 与剪裁路径 'clipPath' 元素相对应。The SVGClipPathElement interface corresponds to the 'clipPath' element.

IDL定义 IDLDefinition

interface SVGClipPathElement : 

                SVGElement,

                SVGTests,

                SVGLangSpace,

                SVGExternalResourcesRequired,

                SVGStylable,

                SVGTransformable,

                SVGUnitTypes { 

  readonly attribute SVGAnimatedEnumeration clipPathUnits;

};

 

属性 Attributes

readonly SVGAnimatedEnumeration clipPathUnits

对应给定  'clipPath'  元素的属性clipPathUnits。取在SVGUnitTypes中定义的常量之一作为其值。 Corresponds toattribute clipPathUnits on the given 'clipPath' element. Takes one of the constantsdefined in SVGUnitTypes.

 

接口SVGMaskElement   Interface SVGMaskElement

接口 SVGMaskElement  与蒙版 'mask' 元素 相对应。The SVGMaskElement interfacecorresponds to the 'mask' element.

IDL定义 IDLDefinition

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;

};

 

属性 Attributes

readonly SVGAnimatedEnumeration maskUnits

对应给定'mask'元素的属性maskUnits。取在SVGUnitTypes中定义的常量之一作为其值。 Corresponds toattribute maskUnits on the given 'mask' element. Takes one of the constants defined inSVGUnitTypes.

readonly SVGAnimatedEnumeration maskContentUnits

对应给定'mask'元素的属性maskContentUnits。取在SVGUnitTypes中定义的常量之一作为其值。  Corresponds toattribute maskContentUnits on the given 'mask' element. Takes one of the constants defined inSVGUnitTypes.

readonly SVGAnimatedLength x

对应给定'mask'元素的属性x。 Corresponds to attribute x on thegiven 'mask' element.

readonly SVGAnimatedLength y

对应给定'mask'元素的属性y。 Corresponds to attribute y on thegiven 'mask' element.

readonly SVGAnimatedLength width

对应给定'mask'元素的属性 width 。Corresponds to attribute width onthe given 'mask' element.

readonly SVGAnimatedLength height

对应给定'mask'元素的属性height 。 Corresponds to attribute height on thegiven 'mask' element.

---

previous next   contents   elements   attributes   properties   index