精图规范1.0----3 渲染模型 Rendering Model

previous next   contents   elements   attributes   properties   index  

---

04 September 2001

3 渲染模型 Rendering Model

内容 Contents

• 3.1 引言 Introduction
• 3.2 绘画模型 The painters model
• 3.3 渲染次序 Rendering Order
• 3.4 如何渲染组合元素 How groups are rendered
• 3.5 如何渲染普通元素 How elements are rendered
• 3.6 图形元素的类型 Types of graphics elements
  • 3.6.1 形状和文本的绘制 Painting shapes and text
  • 3.6.2 光栅图片的绘制 Painting raster images
• 3.7 对绘画区域进行滤镜处理 Filtering painted regions
• 3.8 裁剪、蒙版和对象不透明处理 Clipping, masking and object opacity
• 3.9 与上级的合成 Parent Compositing

 

3.1 引言 Introduction

我们期望精图的实现其行为好像它们实现了在本章中描述的渲染（或映象）模型。一个实际的实现不必按照此方式实现此模型，但是在实现所支持的设备上的效果应该与此模型所描述的保持匹配。Implementations of SVG are expected to behave as though theyimplement a rendering (or imaging) model corresponding to the one described inthis chapter. A real implementation is not required to implement the model inthis way, but the result on any device supported by the implementation shallmatch that described by this model.

在附录 一致性要求 中描述了实际实现与此描述相偏离的范围。在实践中一个实际的实现将会有些许的偏离，因为输出设备（例如只支持一个受限制的颜色范围）以及实现一个精确的数学模型的实际限制（例如对于逼真的性能曲线只能由近似的直线段来表示，近似只需要达到足够的精度满足一致性要求即可）。The appendix onconformancerequirements describes the extent to which an actual implementation maydeviate from this description. In practice an actual implementation willdeviate slightly because of limitations of the output device (e.g. only alimited range of colors might be supported) and because of practicallimitations in implementing a precise mathematical model (e.g. for realisticperformance curves are approximated by straight lines, the approximation needonly be sufficiently precise to match the conformance requirements).

3.2 绘画模型 The painters model

精图使用渲染的“绘画模型”。绘制 用在输出设备上的一系列操作，而每个操作在输出设备的特定区域进行绘制。当此区域覆盖一个以前的绘制区域时，新的绘制将部分或完全遮盖旧的区域。当绘制为不完全透明时，在输出设备上由数学规则所定义的合成输出结果在简单α混合 中描述。SVG uses a "paintersmodel" of rendering. Paintis applied in successive operations to the output device such that eachoperation paints over some area of the output device. When the area overlaps apreviously painted area the new paint partially or completely obscures the old.When the paint is not completely opaque the result on the output device isdefined by the (mathematical) rules for compositing described underSimpleAlpha Blending.

3.3 渲染次序 Rendering Order

在精图文档片断中的元素有一个隐含的次序，在精图文档中前面的元素首先绘制。后面的元素被绘制在以前绘制的元素的上面。Elements in an SVG document fragment have an implicit drawing order,with the first elements in the SVG document fragment getting"painted" first. Subsequent elements are painted on top of previouslypainted elements.

3.4 如何渲染组合元素 How groups are rendered

对成组的元素例如 'g' （参见容器元素）进行渲染具有下列的效果，首先产生一个临时独立的画布，而此画布是黑色透明的，然后在其上绘制组中子元素。将组合元素作为一个整体看待，对于此组所指定的任何滤镜效果将用于创建一个修改的临时画布。考虑组中组级的蒙版 和 不透明处理的作用，此修改的临时画布将最终与背景合成。Grouping elements such as the 'g' (see containerelements) have the effect of producing a temporary separate canvasinitialized to transparent black onto which child elements are painted. Uponthe completion of the group, anyfiltereffects specified for the group are applied to create a modified temporarycanvas. The modified temporary canvas is composited into the background, takinginto account any group-levelmasking and opacitysettings on the group.

3.5 如何渲染普通元素 How elements are rendered

单独的 图形元素的渲染过程就像每一图形元素作为一组所作的渲染一样；故其效果就是，首先为每个图形元素创建一个临时独立的画布，然后在其上绘制此元素（参见下面的绘制形状和文本以及绘制光栅图片）。对于此元素所指定的任何 滤镜效果将用于创建一个修改的临时画布。考虑元素的剪裁、蒙版和不透明处理的作用，此修改的临时画布将最终与背景合成。Individualgraphicselements are rendered as if each graphics element represented its owngroup; thus, the effect is as if a temporary separate canvas is created for eachgraphics element. The element is first painted onto the temporary canvas (seePaintingshapes and text and Paintingraster images below). Then any filtereffects specified for the graphics element are applied to create a modifiedtemporary canvas. The modified temporary canvas is then composited into thebackground, taking into account anyclipping,masking and object opacity settings on the graphics element.

3.6 图形元素的类型 Typesof graphics elements

精图支持三种基本类型的图形元素，这些元素可以渲染到画布中：SVGsupports three fundamental types ofgraphicselements that can be rendered onto the canvas:

• 形状，代表一些直线和曲线的某种组合 Shapes, which represent some combination of straight line and curves
• 文本，代表字符图元的某种组合 Text, which represents some combination of character glyphs
• 光栅图片，代表在一个矩形栅格上的一系列指定了绘制颜色和透明度（常常称为α）的点的矩阵。（精图要求支持在一致性要求中规定的光栅图片格式）Raster images, which represent an array of values that specify the paint color and opacity (often termed alpha) at a series of points on a rectangular grid. (SVG requires support for specified raster image formats underconformance requirements.)

3.6.1 几何形状和文本的绘制Painting shapes and text

几何 形状和文本可以被填充 （即，在几何形状的内部进行绘制）和描边 （即，沿几何形状的轮廓线进行绘制）。描边操作以对象的轮廓线为中心，这样，绘画的一半落在几何形状的内部而另一半落在几何形状的外部。Shapes and text can befilled (i.e.,apply paint to the interior of the shape) and stroked (i.e.,apply paint along the outline of the shape). A stroke operation is centered onthe outline of the object; thus, in effect, half of the paint falls on theinterior of the shape and half of the paint falls outside of the shape.

对于某些类型的几何形状， 标记符号 （它本身可以由任何几何形状、文本和图片组合而成）可以绘制在选定的顶点上。每个标记符号被绘制就像其图形内容被附加到精图文档树的使用此标记符号的几何形状对象的后面一样。对标记符号的渲染采用与图形元素相同的方法。标记符号不用于文本。For certain types of shapes,marker symbols(which themselves can consist of any combination of shapes, text and images)can be drawn at selected vertices.Each marker symbolis painted as if its graphical content were expanded into the SVG document treejust after the shape object which is using the given marker symbol. Thegraphical contents of a marker symbol are rendered using the same methods asgraphics elements. Marker symbols are not applicable to text.

先绘制填充，然后绘制描边，最后绘制标记符号。标记符号沿几何形状的轮廓线从几何形状的开始到结束的方向进行绘制。The fill is painted first, then the stroke, and then the markersymbols. The marker symbols are rendered in order along the outline of theshape, from the start of the shape to the end of the shape.

每个填充和描边操作都有各自的透明度设置；于是，可以用半透明纯色填充或描边几何形状，可以使用不同的透明值进行填充和描边操作。Each fill and stroke operation has its own opacity settings; thus,you can fill and/or stroke a shape with a semi-transparently drawn solid color,with different opacity values for the fill and stroke operations.

填充和描边操作之间是完全独立的绘制操作；于是，如果对某一几何形状既要填充又要描边，描边的一半将被绘制在填充的某些部分上面。The fill and stroke operations are entirely independent paintingoperations; thus, if you both fill and stroke a shape, half of the stroke willbe painted on top of part of the fill.

精图支持下列内置的绘制类型，这些类型可以用在填充和描边操作：SVG supports the following built-in types of paint which can be usedin fill and stroke operations:

• 纯色Solid color
• 渐变(直线的和放射的)Gradients (linear and radial)
• 纹理装饰Patterns

3.6.2光栅图片的绘制Painting raster images

当绘制一个光栅图像时，最初的样本通过一个算法在输出设备上所要求的位置上“重新采样”生成合适的样本。对“重新采样”的要求将在一致性要求中讨论。When araster image is rendered, the original samples are "resampled" usingstandard algorithms to produce samples at the positions required on the outputdevice. Resampling requirements are discussed underconformance requirements.

3.7 对绘画区域进行滤镜处理 Filteringpainted regions

精图允许对任何绘制操作进行滤镜处理。（参见滤镜效果.）SVG allows any painting operationto be filtered. (SeeFilterEffects.)

在这种情况下，其结果就是绘制操作被应用到一个初始化为透明黑色的中介画布上，其尺寸由滤镜效果给定的规则确定，然后再由滤镜效果 中定义的过程进行滤镜处理。In this case the resultmust be as though the paint operations had been applied to an intermediatecanvas initialized to transparent black, of a size determined by the rulesgiven inFilter Effectsthen filtered by the processes defined in Filter Effects.

3.8 裁剪、蒙版和对象不透明处理Clipping, masking and object opacity

通过使用裁剪和蒙版，精图允许将任何绘制操作限制在输出设备的子区域上。在裁剪、蒙版和合成中对其进行描述。SVG allows any paintingoperation to be limited to a subregion of the output device by clipping andmasking. This is described in Clipping,Masking and Compositing.

裁剪使用一个路径定义输出设备的一个用于绘画的区域。在裁剪区域内执行的绘画操作被渲染，于是输出设备只有落入裁剪区域中的部分才被绘画操作所影响。一个裁剪路径可以被看作是一个蒙版，此蒙版当中，在裁剪路径之外像素为α值为零的黑色而在内部的像素为α值为1的白色。“在内”由绘制路径的内部使用的相同规则给以定义。对于低分辨率的设备裁剪路径通常无别名（参见'shape-rendering'）。裁剪在 裁剪路径.中描述。Clipping uses a path to define aregion of the output device to which paint can be applied. Any paintingoperation executed within the scope of the clipping must be rendered such thatonly those parts of the device that fall within the clipping region are affectedby the painting operation. A clipping path can be thought of as a mask whereinthose pixels outside the clipping path are black with an alpha value of zeroand those pixels inside the clipping path are white with an alpha value of one."Within" is defined by the same rules used to determine the interiorof a path for painting. The clipping path is typicallyanti-aliased on low-resolution devices (see 'shape-rendering').Clipping is described in Clipping paths.

蒙版通过使用所引用的精图元素的颜色通道和α通道的亮度来定义一套辅助的α值，这些α值将与使用此蒙版的图形本身的α值相乘。蒙版在蒙版中描述。Masking uses the luminance ofthe color channels and alpha channel in a referenced SVG element to define asupplemental set of alpha values which are multiplied to the alpha valuesalready present in the graphics to which the mask is applied. Masking isdescribed inMasking.

一个补充的蒙版操作也可以被指定为使用一个“全局”的透明度到一组渲染操作。此时，蒙版是无限的，它的颜色为白色，而α通道为一个给定透明值。（参见 'opacity'属性.）A supplemental masking operationmay also be specified by applying a "global" opacity to a set ofrendering operations. In this case the mask is infinite, with a color of whiteand an alpha channel of the given opacity value. (See'opacity'property.)

无论何种情况，精图的实现的行为应该是，所有绘画和滤镜先作用到一个初始化为透明的黑色的中介画布上，然后将中介画布的α值与裁剪路径所隐含的α值、蒙版的α值以及'opacity'属性的α值相乘，得到结果画布，再使用简单α混合.合成到背景中。于是,如果输出设备的某个区域使用不透明的红色绘制然后用不透明的绿色绘制再整个为50％的透明度，那么其结果和50％透明度的绿色绘制的一样。这是因为在将整个中介渲染到输出设备之前不透明绿色完全使中介画布上的红色看不见了。In all cases the SVG implementation must behave as though allpainting and filtering is first performed to an intermediate canvas which hasbeen initialized to transparent black. Then, alpha values on the intermediatecanvas are multiplied by the implicit alpha values from the clipping path, thealpha values from the mask, and the alpha values from the'opacity'property. The resulting canvas is composited into the background usingsimplealpha blending. Thus if an area of the output device is painted with agroup opacity of 50% using opaque red paint followed by opaque green paint theresult is as though it had been painted with just 50% opaque green paint. Thisis because the opaque green paint completely obscures the red paint on theintermediate canvas before the intermediate as a whole is rendered onto theoutput device.

3.9 与上级的合成 Parent Compositing

精图文档片断可以是半透明的。在许多环境中（例如环球网浏览器），精图文档片断会进行最后合成这一步，此时它作为一个整体会被半透明地混合到背景画布中。SVG document fragments can be semi-opaque. In many environments(e.g., Web browsers), the SVG document fragment has a final compositing stepwhere the document as a whole is blended translucently into the backgroundcanvas.

---

previous next   contents   elements   attributes   properties   index