精图规范1.0----15 滤镜效果 Filter Effects

最新推荐文章于 2022-10-20 19:19:40 发布
最新推荐文章于 2022-10-20 19:19:40 发布
阅读量2.6k 收藏
点赞数
分类专栏： SVG

previous next   contents   elements   attributes   properties   index  

04 September 2001

15 滤镜效果 Filter Effects

 

内容 Contents

 

15.1 引言  Introduction

本章描述精图宣布的滤镜效果特征集, 当它们与强大的精图2D 能力相结合时能够描述以在客户端易于生成和改变这样的一种方式在环球网上使用的大多数普通美术品. 另外, 对精图图形元素 和 容器元素 使用滤镜效果的这种能力帮助维护文档的语义结构, 代替求助于图像它们除了一般为固定的分辨率外往往倾向使它们所代替的元素的原来的语义变得不清楚. 这对用于文本的效果是特别真实的.     This chapter describes SVG's declarativefilter effects feature set, which when combined with the 2D power of SVG candescribe much of the common artwork on the Web in such a way that client-sidegeneration and alteration can be performed easily. In addition, the ability toapply filter effects to SVGgraphicselements and containerelements helps to maintain the semantic structure of the document, insteadof resorting to images which aside from generally being a fixed resolution tendto obscure the original semantics of the elements they replace. This isespecially true for effects applied to text.

一种滤镜效果由一系列对给定的原始图形进行的图形操作组成最终产生一个被修改的图形结果. 滤镜效果的结果代替原来的原始图形渲染到目标设备上. 下面解释了此过程:    Afilter effect consists of a series of graphics operations that are applied to agiven source graphic to produce a modifiedgraphical result. The result of the filter effect is rendered to the targetdevice instead of the original source graphic. The following illustrates theprocess:

View thisexample as SVG (SVG-enabled browsers only)
 

滤镜效果通过 'filter' 元素定义. 为了将滤镜效果用于一个 图形元素 或 一个 容器元素, 要设置给定元素上'filter' 属性的值使其引用此滤镜效果.      Filter effects are defined by'filter' elements. To apply a filter effect to a graphicselement or a containerelement, you set the value of the 'filter' property on the given element such that itreferences the filter effect.

每个 'filter' 元素包含一套基本滤镜作为它的孩子. 每个基本滤镜在一个或更多的输入上执行一个单一基本的图形操作 (例如, 一种模糊或一种灯光效果) , 产生一种图形结果. 因为大多数基本滤镜表示某种形式的图像处理, 故在大多数情况下一种基本滤镜的输出为单一的RGBA图像.      Each'filter' element contains a set of filter primitives as its children. Each filter primitiveperforms a single fundamental graphical operation (e.g., a blur or a lightingeffect) on one or more inputs, producing a graphical result. Because most ofthe filter primitives represent some form of image processing, in most casesthe output from a filter primitive is a single RGBA image.

原来的原始图形或基本滤镜的结果可以用作一个或多个其它基本滤镜的输入. 一种通常的应用是使用原始图形多次. 例如, 一种简单的滤镜可以增加一个原来的原始图形的偏移的黑色复制代替原图形来创造一种阴影效果. 在效果上, 现在存在两层图形, 两者具有相同的原来的原始图形.      The original source graphic or the result from a filter primitive can be usedas input into one or more other filter primitives. A common application is touse the source graphic multiple times. For example, a simple filter couldreplace one graphic by two by adding a black copy of original source graphicoffset to create a drop shadow. In effect, there are now two layers ofgraphics, both with the same original source graphics.

当用于 容器元素 比如'g', 'filter' 属性用于此组的内容就像一个整体一样. 组中的孩子不直接渲染到屏幕上; 代之以, 需要对孩子进行渲染的图形命令被临时存储起来. 典型地, 这些图形命令是作为 被引用的'filter' 元素通过使用关键词SourceGraphic 或SourceAlpha进行处理的一部分而执行的. 滤镜效果能够用于无内容的容器元素 (例如, 一个空的 'g' 元素), 在这种情况下 SourceGraphic 或SourceAlpha 由一个透明的黑色矩形构成此矩形的尺寸为滤镜效果区域的尺寸.       When applied to containerelements such as 'g', the 'filter' property applies to the contents of thegroup as a whole. The group's children do not render to the screen directly;instead, the graphics commands necessary to render the children are storedtemporarily. Typically, the graphics commands are executed as part of theprocessing of the referenced 'filter' element via use of the keywords SourceGraphic or SourceAlpha. Filter effects can be applied to containerelements with no content (e.g., an empty 'g' element), in which case the SourceGraphic or SourceAlpha consist of a transparent blackrectangle that is the size of the filter effects region.

有时基本滤镜导致未定义的像素. 例如, 基本滤镜 'feOffset' 能够向右向下移动图像, 在顶部和左部留下未定义的像素. 在这些情况下,未定义的像素被设置成透明的黑色.      Sometimes filter primitives result in undefined pixels. For example, filterprimitive'feOffset' can shift an image down and to theright, leaving undefined pixels at the top and left. In these cases, theundefined pixels are set to transparent black.

 

15.2 一个例子  An example

下面显示一个滤镜效果的例子.  The following shows an example of a filter effect.

例子 filters01 - 介绍滤镜效果.        Example filters01 - introducing filter effects.

 
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
              "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="7.5cm" height="5cm" viewBox="0 0 200 120"
     xmlns="http://www.w3.org/2000/svg">
  <title>Example filters01.svg - introducing filter effects</title>
  <desc>An example which combines multiple filter primitives
        to produce a 3D lighting effect on a graphic consisting
        of the string "SVG" sitting on top of oval filled in red
        and surrounded by an oval outlined in red.</desc>
  <defs>
    <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
      <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
      <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" 
                          specularExponent="20" lighting-color="#bbbbbb"  
                          result="specOut">
        <fePointLight x="-5000" y="-10000" z="20000"/>
      </feSpecularLighting>
      <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
      <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" 
                   k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
      <feMerge>
        <feMergeNode in="offsetBlur"/>
        <feMergeNode in="litPaint"/>
      </feMerge>
    </filter>
  </defs>
  <rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" />
  <g filter="url(#MyFilter)" >
          <g>
      <path fill="none" stroke="#D90000" stroke-width="10" 
            d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
      <path fill="#D90000" 
            d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
      <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
        <text x="52" y="76">SVG</text>
      </g>
    </g>
  </g>
</svg>

Example filters01

View thisexample as SVG (SVG-enabled browsers only)
 

在上面的例子中使用的滤镜效果在这里重复如下,并在六个基本滤镜的每个之前的左边的列上标上引用数字:    The filter effect used in the example above is repeated here with referencenumbers in the left column before each of the six filter primitives:

 
 
1
2
3
 
 
 
 
4
5
 
6
 
 
 
 
 
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
  <desc>Produces a 3D lighting effect.</desc>
  <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
  <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
  <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" 
                      specularExponent="20" lighting-color="#bbbbbb" 
                      result="specOut">
    <fePointLight x="-5000" y="-10000" z="20000"/>
  </feSpecularLighting>
  <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
  <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" 
               k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
  <feMerge>
    <feMergeNode in="offsetBlur"/>
    <feMergeNode in="litPaint"/>
  </feMerge>
</filter>

下面的图片显示了由六个滤镜元素的每个所产生的中间图像:    The following pictures show the intermediateimage results from each of the six filter elements:


Source graphic

 


After filter primitive 1

 


After filter primitive 2

 


After filter primitive 3

 

 

 

 

 

 

 

 

 


After filter primitive 4

 


After filter primitive 5

 


After filter primitive 6

  1. 基本滤镜 'feGaussianBlur' 以SourceAlpha作为输入, 而SourceAlpha 为原图形的alpha 通道. 其结果存储在命名为"blur"的临时缓冲区 . 注意 "blur" 被基本滤镜2和3作为输入.        Filter primitive'feGaussianBlur' takes input SourceAlpha, which is the alpha channel of the source graphic. The result is stored in a temporary buffer named "blur". Note that "blur" is used as input to both filter primitives 2 and 3.
  2. 基本滤镜 'feOffset' 以 缓冲区 "blur"为输入, 在 x 和的正向进行平移, 并创建一个新的命名为"offsetBlur"的缓冲区 . 其效 y果为一种阴影.    Filter primitive'feOffset' takes buffer "blur", shifts the result in a positive direction in both x and y, and creates a new buffer named "offsetBlur". The effect is that of a drop shadow.
  3. 基本滤镜 'feSpecularLighting', 使用缓冲区 "blur"作为表面提升的原型并从一个单一的点光源生成灯光效果. 其结果存储在缓冲区 "specOut"中.      Filter primitive'feSpecularLighting', uses buffer "blur" as a model of a surface elevation and generates a lighting effect from a single point source. The result is stored in buffer "specOut".
  4. 基本滤镜 'feComposite' 通过 基本滤镜 3 的结果与原图形的alpha通道进行蒙版操作使得中间结果不比原来的图形大.      Filter primitive'feComposite' masks out the result of filter primitive 3 by the original source graphics alpha channel so that the intermediate result is no bigger than the original source graphic.
  5. 基本滤镜 'feComposite' 将镜子的灯光效果与原图形进行合成.        Filter primitive 'feComposite' composites the result of the specular lighting with the original source graphic.
  6. 基本滤镜 'feMerge' 将两层合成到一起. 下层由基本滤镜2的阴影效果构成. 上层基本滤镜5的镜子的灯光效果构成.       Filter primitive'feMerge' composites two layers together. The lower layer consists of the drop shadow result from filter primitive 2. The upper layer consists of the specular lighting result from filter primitive 5.

 

15.3 'filter'元素 The 'filter'element

'filter'元素的描述如下:    Thedescription of the 'filter' element follows:

 
<!ENTITY % filterExt "" >
<!ELEMENT filter (%descTitleMetadata;,(feBlend|feFlood|
  feColorMatrix|feComponentTransfer|
  feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap|
  feGaussianBlur|feImage|feMerge|
  feMorphology|feOffset|feSpecularLighting|
  feTile|feTurbulence|
  animate|set
  %filterExt;)*) >
<!ATTLIST filter
  %stdAttrs;
  %xlinkRefAttrs;
  xlink:href %URI; #IMPLIED
  %langSpaceAttrs;
  externalResourcesRequired %Boolean; #IMPLIED
  class %ClassList; #IMPLIED
  style %StyleSheet; #IMPLIED
  %PresentationAttributes-All;
  filterUnits (userSpaceOnUse | objectBoundingBox) #IMPLIED
  primitiveUnits (userSpaceOnUse | objectBoundingBox) #IMPLIED
  x %Coordinate; #IMPLIED
  y %Coordinate; #IMPLIED
  width %Length; #IMPLIED
  height %Length; #IMPLIED
  filterRes %NumberOptionalNumber; #IMPLIED >

性质定义:  Attribute definitions:

filterUnits = "userSpaceOnUse|objectBoundingBox"

参见滤镜效果区域.  SeeFilter effects region.

primitiveUnits ="userSpaceOnUse |objectBoundingBox"

指定基本滤镜内的各种长度值以及用于定义基本滤镜的子区域的性质的坐标系.    Specifies the coordinate system for the various length values within the filterprimitives and for the attributes that define the filterprimitive subregion.
如果 primitiveUnits="userSpaceOnUse", 在滤镜定义中所涉及的任何长度值按照此'filter' 元素被引用时所在地方的当前用户坐标系来表示其值 (即, 经由'filter' 属性引用'filter' 元素的元素的坐标系).       IfprimitiveUnits="userSpaceOnUse",any length values within the filter definitions represent values in the currentuser coordinate system in place at the time when the'filter' element is referenced (i.e., the usercoordinate system for the element referencing the'filter' element via a 'filter' property).
如果 primitiveUnits="objectBoundingBox", 那么在滤镜定义中所涉及的任何长度值按照引用元素的边框的分数或百分数来表示 (参见对象边框单位).      If primitiveUnits="objectBoundingBox", then anylength values within the filter definitions represent fractions or percentagesof the bounding box on the referencing element (seeObjectbounding box units).
如果不指定此性质primitiveUnits, 其效果相当于指定此性质的值为userSpaceOnUse.     Ifattribute primitiveUnits is not specified, thenthe effect is as if a value of userSpaceOnUsewere specified.
Animatable:yes.

x = "<coordinate>"

参见滤镜效果区域.   SeeFilter effects region.

y = "<coordinate>"

参见滤镜效果区域.   SeeFilter effects region.

width = "<length>"

参见滤镜效果区域.   SeeFilter effects region.

height = "<length>"

参见滤镜效果区域.   SeeFilter effects region.

filterRes = "<number-optional-number>"

参见滤镜效果区域.   SeeFilter effects region.

xlink:href = "<uri>"

一个对在当前精图文档片段内的另一个'filter'元素的 URI 引用  .在被引用的'filter' 元素上定义而在此元素上未定义的任何性质将被此元素所继承. 如果此元素未定义滤镜节点, 并且被引用的元素定义了滤镜节点 (可能由于它自己href性质), 那么这个元素继承被引用'filter'元素定义的滤镜节点 . 继承可以间接到任意层;于是, 如果被引用的'filter' 元素通过自己的href性质继承性质或它的滤镜节点规定, 那么当前元素可以继承那些性质或滤镜节点规定.      AURIreference to another 'filter' elementwithin the current SVG document fragment. Any attributes which are defined onthe referenced 'filter' element which are notdefined on this element are inherited by this element. If this element has nodefined filter nodes, and the referenced element has defined filter nodes(possibly due to its own href attribute), thenthis element inherits the filter nodes defined from the referenced 'filter' element. Inheritance can be indirect to anarbitrary level; thus, if the referenced 'filter'element inherits attributes or its filter node specification due to its own href attribute, then the current element can inheritthose attributes or filter node specifications.
Animatable:yes.

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

%stdAttrs;,%langSpaceAttrs;,%xlinkRefAttrs;externalResourcesRequired,%PresentationAttributes-All;.

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

'filter' 元素决不会被直接渲染; 它们唯一的用法是通过 'filter' 属性来加以引用.  'display' 属性不能用于'filter'元素; 于是, 'filter'元素不被直接渲染即使'display'属性被设置为非none的值 , 并且 'filter' 元素可被引用即使在此'filter' 元素或其祖先上的'display'属性被设置为none.    'filter' elements are never rendered directly;their only usage is as something that can be referenced using the'filter' property. The 'display' property does not apply to the 'filter' element; thus, 'filter'elements are not directly rendered even if the'display' property is set to a value other than none, and 'filter'elements are available for referencing even when the'display' property on the 'filter'element or any of its ancestors is set to none.

 

15.4 'filter'属性 The 'filter'property

'filter'属性描述如下:     The description of the 'filter' property is asfollows:

'filter'

Value:  

<uri> | none | inherit

Initial:  

none

Applies to:  

container elements andgraphics elements

Inherited:  

no

Percentages:  

N/A

Media:  

visual

Animatable:  

yes

<uri>

 对一个 'filter' 元素的一个URI 引用,此'filter' 元素所定义的滤镜效果将被用于这一元素上.     A URIreference to a 'filter' element which defines the filter effectsthat shall be applied to this element.

none

在此元素上不使用任何滤镜效果.    Do not apply any filter effects to this element.

 

15.5 滤镜效果区域  Filter effects region

  'filter' 元素可以定义在画布上的其滤镜效果作用其上的区域并可以为用于处理任何基于光栅的基本滤镜的中间过渡图像提供一种分辨率. 'filter' 元素有下列性质它们一起定义滤镜效果区域:      A 'filter' element can define a region on thecanvas to which a given filter effect applies and can provide a resolution forany intermediate continuous tone images used to process any raster-based filterprimitives. The'filter' element has the following attributeswhich work together to define the filter effects region:

  • filterUnits={ userSpaceOnUse | objectBoundingBox }.
    定义x, y, width, height性质的坐标系.    Defines the coordinate system for attributesx, y, width, height.
    如果 filterUnits="userSpaceOnUse", x, y, width, height  按照当 'filter' 元素被引用的地方当前用户坐标系来表示其值 (即, 经由 'filter' 属性引用'filter'元素的元素的用户坐标系).     IffilterUnits="userSpaceOnUse", x, y, width, height represent values in the current user coordinate system in place at the time when the'filter' element is referenced (i.e., the user coordinate system for the element referencing the'filter' element via a 'filter' property).
    如果filterUnits="objectBoundingBox", 那么 x, y, width, height 根据引用元素的边框的分数或百分数来表示(参见 对象边框单位).       If filterUnits="objectBoundingBox", then x, y, width, height represent fractions or percentages of the bounding box on the referencing element (seeObject bounding box units).
    如果不指定属性 filterUnits , 那么其效果相当于指定了属性的值为 objectBoundingBox .      If attribute filterUnits is not specified, then the effect is as if a value of objectBoundingBox were specified.
    Animatable: yes.
  • x, y, width, height, 它们一起定义在画布上滤镜所作用的矩形区域.     x, y, width, height, which define a rectangular region on the canvas to which this filter applies.
    滤镜所要求的内存数量和处理时间与此矩形的尺寸以及滤镜的filterRes性质有关.      The amount of memory and processing time required to apply the filter are related to the size of this rectangle and the filterRes attribute of the filter.
    The coordinate system for these attributes depends on the value for attribute filterUnits.
    当width 或 height为负数时是一种错误 (参见 错误处理). 零值则不对引用滤镜的元素进行渲染.        Negative values for width orheight are an error (see Error processing). Zero values disable rendering of the element which referenced the filter.
    这个矩形的边界作为包含在给定的 'filter' 元素中每个基本滤镜的一个硬性的剪切区域; 于是, 如果给定的基本滤镜的效果越过此矩形的边界 (这有时当使用有一个非常大的stdDeviation的'feGaussianBlur' 基本滤镜时会发生), 效果的部分将被剪切掉.       The bounds of this rectangle act as a hard clipping region for eachfilter primitive included with a given 'filter' element; thus, if the effect of a given filter primitive would extend beyond the bounds of the rectangle (this sometimes happens when using a'feGaussianBlur' filter primitive with a very large stdDeviation), parts of the effect will get clipped.
    如果不指定 x 或 y , 其效果相当于指定其值为"-10%" .     If x or y is not specified, the effect is as if a value of "-10%" were specified.
    如果不指定 width 或 height , 其效果相当于指定其值为"120%" .    Ifwidth or height is not specified, the effect is as if a value of "120%" were specified.
    Animatable: yes.
  • filterRes (它具有形式 x-像素 [y-像素]) 表示中间图像以像素为单位的宽度和高度. 如果不提供, 那么将使用一种对于目标设备合适的有充分理由的缺省分辨率. (对于显示器, 一个合适的显示分辨率, 当前显示器的像素分辨率较合适, 为缺省分辨率. 对于打印机, 一种合适的公用的打印机分辨率, 比如 400dpi, 为缺省分辨率.)     filterRes (which has the form x-pixels [y-pixels]) indicates the width and height of the intermediate images in pixels. If not provided, then a reasonable default resolution appropriate for the target device will be used. (For displays, an appropriate display resolution, preferably the current display's pixel resolution, is the default. For printing, an appropriate common printer resolution, such as 400dpi, is the default.)
    要当心给这一性质指派一种非缺省的值. 值太小可能导致不想要的像素后果. 值太大可能导致慢的处理速度以及较多的内存的使用.       Care should be taken when assigning a non-default value to this attribute. Too small of a value may result in unwanted pixelation in the result. Too large of a value may result in slow processing and large memory usage.
    Negative values are an error (see Error processing). Zero values disable rendering of the element which referenced the filter.
    Animatable: yes.

注意 filterUnits 可能的两种值(即, objectBoundingBox和 userSpaceOnUse) 导致一个滤镜区域它的坐标系的X-轴和 Y-轴分别平行于引用此滤镜的元素的坐标系的 X-轴和Y-轴.       Note that both of the two possible value for filterUnits(i.e., objectBoundingBox and userSpaceOnUse) result in a filter region whosecoordinate system has its X-axis and Y-axis each parallel to the X-axis andY-axis, respectively, of the user coordinate system for the element to which thefilter will be applied.

有时当滤镜区域被直接映照为设备的像素时其实现可以达到较高的性能; 于是, 为了在显示设备上达到最好的性能, 建议作者定义它们的区域使得精图用户代理能够将滤镜区域与背景进行像素对像素的对齐. 特别,为了达到最好的滤镜效果的性能, 避免旋转和歪斜用户坐标系. 对性质filterRes清楚的赋值可能帮助或损害性能. 如果 filterRes 小于自动的(即, 缺省的) 滤镜分辨率, 那么滤镜效果也许有较快的性能 (通常以损失质量为代价). 如果filterRes 大于自动的(即, 缺省的) 滤镜分辨率, 那么滤镜效果的性能通常较慢.     Sometimes implementers can achieve faster performance when the filter regioncan be mapped directly to device pixels; thus, for best performance on displaydevices, it is suggested that authors define their region such that SVG useragent can align the filter region pixel-for-pixel with the background. Inparticular, for best filter effects performance, avoid rotating or skewing theuser coordinate system. Explicit values for attribute filterRescan either help or harm performance. If filterResis smaller than the automatic (i.e., default) filter resolution, then filtereffect might have faster performance (usually at the expense of quality). If filterRes is larger than the automatic (i.e., default)filter resolution, then filter effects performance will usually be slower.

常常需要提供补白空间因为滤镜效果也许影响在给定对象的刚好适合的边框之外的少量像素. 基于这种目的,可能为x, y提供负的百分值以及为width, height提供大于100%的百分值. 作为一个例子,这就是为什么滤镜效果区域的缺省值为x="-10%" y="-10%" width="120%"height="120%"的原因.       It is often necessary toprovide padding space because the filter effect might impact bits slightlyoutside the tight-fitting bounding box on a given object. For these purposes,it is possible to provide negative percentage values forx, yand percentages values greater than 100% for width, height.This, for example, is why the defaults for the filter effects region arex="-10%" y="-10%" width="120%"height="120%".

15.6 存取背景图像  Accessing thebackground image

滤镜效果的两个可能的伪输入图像是 BackgroundImage 和 BackgroundAlpha, 它们每个表示在滤镜区域下当'filter'元素将被使用时画布的图像快照.BackgroundImage 表示画布的颜色值和alpha 通道(即, RGBA 像素值), 而 BackgroundAlpha仅表示 alpha 通道.      Two possible pseudo input images for filter effects areBackgroundImage and BackgroundAlpha,which each represent an image snapshot of the canvas under the filter region atthe time that the'filter' element is invoked. BackgroundImage represents both the color valuesand alpha channel of the canvas (i.e., RGBA pixel values), whereasBackgroundAlpha represents only the alpha channel.

精图用户代理的实现常常需要维持附加的背景图像缓冲以便支持 BackgroundImage 和 BackgroundAlpha伪输入图像. 有时, 背景图像缓冲将包含在当前画布上累积绘制操作的一种在内存的复制.      Implementations of SVG user agents often will need to maintain supplementalbackground image buffers in order to support theBackgroundImageand BackgroundAlpha pseudo input images.Sometimes, the background image buffers will contain an in-memory copy of theaccumulated painting operations on the current canvas.

因为在内存内的图像缓冲可能占据大量的系统资源,精图内容必须在使用 BackgroundImage 和 BackgroundAlpha 伪输入图像之前向精图用户代理显式标明此文档需要存取此背景图像. 能使存取背景图像变得可以的属性为 'enable-background':      Because in-memory image buffers cantake up significant system resources, SVG content must explicitly indicate tothe SVG user agent that the document needs access to the background imagebefore BackgroundImage and BackgroundAlpha pseudo input images can be used.The property which enables access to the background image is'enable-background':

'enable-background'

Value:  

accumulate | new [ <x> <y> <width> <height> ] | inherit

Initial:  

accumulate

Applies to:  

container elements

Inherited:  

no

Percentages:  

N/A

Media:  

visual

Animatable:  

no

'enable-background' 只能用于 容器元素 并指定精图用户代理如何管理背景图像的累积.    'enable-background' is only applicable to containerelements and specifies how the SVG user agents manages the accumulation ofthe background image.

值为 new 表示两件事情:  A value of new indicates two things:

  • 它使当前容器元素的孩子有能力存取背景图像.      It enables the ability of children of the currentcontainer element to access the background image.
  • 它表示一个新的 (即, 初始为黑色透明的) 背景图像画布被建立并且(在效果上) 当前容器元素 的所有孩子除了渲染到目标设备上之外将渲染到此新的背景图像画布上.    It indicates that a new (i.e., initially transparent black) background image canvas is established and that (in effect) all children of the currentcontainer element shall be rendered into the new background image canvas in addition to being rendered onto the target device.

enable-background: accumulate (初始/缺省值)的语义依赖于上下文:     A meaning ofenable-background: accumulate (theinitial/default value) depends on context:

  • 如果一个祖先 容器元素 具有'enable-background:new'的属性值 , 那么在当前容器元素 内的所有图形元素 被渲染到此父容器元素 的背景图像画布上并且也渲染到目标设备上.     If an ancestorcontainer element has a property value of 'enable-background:new', then all graphics elements within the current container element are rendered both onto the parent container element's background image canvas and onto the target device.
  • 否则, 不存在当前背景图像画布, 从而只需将 图形元素 渲染到目标设备上. (No need to render to the background image canvas.)      Otherwise, there is no current background image canvas, so it is only necessary to rendergraphics elements onto the target device. (No need to render to the background image canvas.)

如果一个滤镜效果指定BackgroundImage或BackgroundAlpha伪输入图像并且无祖先容器元素 具有'enable-background:new'的属性值, 那么背景图像请求从技术上来说是错误的. 处理将正常进行不会中断(即, 无错误消息) 并且将提供一个透明的黑色图像作为对此请求的响应.    If a filter effect specifies either theBackgroundImageor the BackgroundAlpha pseudo input images andno ancestor containerelement has a property value of 'enable-background:new', then thebackground image request is technically in error. Processing will proceedwithout interruption (i.e., no error message) and a transparent black imageshall be provided in response to the request.

在new值下的可选参数 <x>,<y>,<width>,<height> 表示 容器元素的用户空间 的子区域在这里允许存取背景图像. 这些参数使精图用户代理潜在地分配相对缺省值较小的临时图像缓冲, 而缺省值要求精图用户代理分配与当前视口一样大的缓冲. 于是, 值<x>,<y>,<width>,<height> 担当在背景图像画布上的一个剪切矩形.  <width> 或 <height> 为负值时为一种错误 (参见错误处理). 如果提供大于零而小于<x>,<y>,<width> 和 <height> 四个值??? 或者如果提供 <width> 或 <height>的值为零,处理BackgroundImage 和 BackgroundAlpha 就像不能进行背景图像处理一样.        The optional <x>,<y>,<width>,<height>parameters on thenew value indicate the subregion of the containerelement's userspace where access to the background image is allowed to happen. Theseparameters enable the SVG user agent potentially to allocate smaller temporaryimage buffers than the default values, which might require the SVG user agentto allocate buffers as large as the current viewport. Thus, the values<x>,<y>,<width>,<height> act as a clipping rectangle onthe background image canvas. Negative values for <width> or<height> are an error (seeErrorprocessing). If more than zero but less than four of the values<x>,<y>,<width> and <height> are specified or if zerovalues are specified for <width> or <height>,BackgroundImage and BackgroundAlphaare processed as if background image processing were not enabled.

假设在文档中有一个元素 E并且E 有一系列的祖先 A1 (它的直接双亲), A2, 等等. (注意: A0 是 E.) 每个祖先 Ai 将有一个相应的临时背景图像离屏缓冲 BUFi.对于被E所引用的'filter' 可用的背景图像  的内容定义如下:      Assume you have an element E in the document and that E has a series ofancestors A1 (its immediate parent), A2, etc. (Note: A0is E.) Each ancestor Ai will have a corresponding temporarybackground image offscreen buffer BUFi. The contents of the backgroundimage available to a 'filter' referenced by E is defined as follows:

  • 寻找其'enable-background'属性值为 new具有最小下标 i 的元素Ai (包括 A0=E) . (注意: 如果不存在这样的祖先元素, 那么不存在对 E可用的背景图像, 此时一个透明的黑色图像将被用作E的背景图像.)       Find the element Ai with the smallest subscript i (including A0=E) for which the'enable-background' property has the value new. (Note: if there is no such ancestor element, then there is no background image available to E, in which case a transparent black image will be used as E's background image.)
  • 对每个 Ai (从 i=n 到 1), 初始化 BUFi 为透明黑色. 渲染Ai 但不包括Ai-1的所有孩子到 BUFi. 利用在这些孩子上对绘制, 滤镜, 剪切, 蒙版和对象透明度的各种设置对这些孩子进行绘制, 滤镜, 剪切, 蒙版和合成. 当 渲染 Ai的孩子到 BUFi时,不 使用在 Ai 上设置的任何滤镜效果, 蒙版和分组透明度  .          For each Ai (from i=n to 1), initialize BUFi to transparent black. Render all children of Ai up to but not including Ai-1 into BUFi. The children are painted, then filtered, clipped, masked and composited using the various painting, filtering, clipping, masking and object opacity settings on the given child. Any filter effects, masking and group opacity that might be set on Ai donot apply when rendering the children of Ai into BUFi.
    (注意对于情况 A0=E而言,  E的图像内容不被渲染到 BUF1 从而不为对E可用的背景图像的部分 . 与此不同的是, E的图像内容经由SourceGraphic 和 SourceAlpha伪输入图像是可用的.)       (Note that for the case of A0=E, the graphical contents of E are not rendered into BUF1 and thus are not part of the background image available to E. Instead, the graphical contents of E are available via the SourceGraphic and SourceAlpha pseudo input images.)
  • 然后,对每个 Ai (从 i=1 到 n-1), 合成 BUFi 到 BUFi+1.     Then, for each Ai (from i=1 to n-1), composite BUFi into BUFi+1.
  • 累积结果 (即, BUFn) 表示对E可用的背景图像 .      The accumulated result (i.e., BUFn) represents the background image available to E.

例子 enable-background-01 解释了背景图像处理的规则.    Example enable-background-01 illustrates the rules forbackground image processing.

 
<?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="13.5cm" height="2.7cm" viewBox="0 0 1350 270"
     xmlns="http://www.w3.org/2000/svg">
  <title>Example enable-background01</title>
  <desc>This test case shows five pictures which illustrate the rules
        for background image processing.</desc>
 
  <defs>
    <filter id="ShiftBGAndBlur" 
            filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="400">
      <desc>
        This filter discards the SourceGraphic, if any, and just produces
        a result consisting of the BackgroundImage shifted down 125 units
        and then blurred.
      </desc>
      <feOffset in="BackgroundImage" dx="0" dy="125" />
      <feGaussianBlur stdDeviation="8" />
    </filter>
    <filter id="ShiftBGAndBlur_WithSourceGraphic" 
            filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="400">
      <desc>
        This filter takes the BackgroundImage, shifts it down 125 units, blurs it,
        and then renders the SourceGraphic on top of the shifted/blurred background.
      </desc>
      <feOffset in="BackgroundImage" dx="0" dy="125" />
      <feGaussianBlur stdDeviation="8" result="blur" />
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
 
  <g transform="translate(0,0)">
    <desc>The first picture is our reference graphic without filters.</desc>
    <rect x="25" y="25" width="100" height="100" fill="red"/>
    <g opacity=".5">
      <circle cx="125" cy="75" r="45" fill="green"/>
      <polygon points="160,25 160,125 240,75" fill="blue"/>
    </g>
    <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
  </g>
 
  <g enable-background="new" transform="translate(270,0)">
    <desc>The second adds an empty 'g' element which invokes ShiftBGAndBlur.</desc>
    <rect x="25" y="25" width="100" height="100" fill="red"/>
    <g opacity=".5">
      <circle cx="125" cy="75" r="45" fill="green"/>
      <polygon points="160,25 160,125 240,75" fill="blue"/>
    </g>
    <g filter="url(#ShiftBGAndBlur)"/>
    <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
  </g>
 
  <g enable-background="new" transform="translate(540,0)">
    <desc>The third invokes ShiftBGAndBlur on the inner group.</desc>
    <rect x="25" y="25" width="100" height="100" fill="red"/>
    <g filter="url(#ShiftBGAndBlur)" opacity=".5">
      <circle cx="125" cy="75" r="45" fill="green"/>
      <polygon points="160,25 160,125 240,75" fill="blue"/>
    </g>
    <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
  </g>
 
  <g enable-background="new" transform="translate(810,0)">
    <desc>The fourth invokes ShiftBGAndBlur on the triangle.</desc>
    <rect x="25" y="25" width="100" height="100" fill="red"/>
    <g opacity=".5">
      <circle cx="125" cy="75" r="45" fill="green"/>
      <polygon points="160,25 160,125 240,75" fill="blue"
               filter="url(#ShiftBGAndBlur)"/>
    </g>
    <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
  </g>
 
  <g enable-background="new" transform="translate(1080,0)">
    <desc>The fifth invokes ShiftBGAndBlur_WithSourceGraphic on the triangle.</desc>
    <rect x="25" y="25" width="100" height="100" fill="red"/>
    <g opacity=".5">
      <circle cx="125" cy="75" r="45" fill="green"/>
      <polygon points="160,25 160,125 240,75" fill="blue"
               filter="url(#ShiftBGAndBlur_WithSourceGraphic)"/>
    </g>
    <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
  </g>
</svg>

Example enable-background-01

Viewthis example as SVG (SVG-enabled browsers only)
 

上述例子包含五部分, 描述如下:    Theexample above contains five parts, described as follows:

  1. 第一组为引用图形. 引用的图像由一个红色矩形和一个的50%透明的 'g' 元素组成. 在 'g' 内部是一个部分与此矩形重叠的绿色圆以及部分与此圆重叠的蓝色三角形构成. 这三个对象然后用一个用蓝色细线描边的矩形框住. 对此引用图形未使用滤镜.      The first set is the reference graphic. The reference graphic consists of a red rectangle followed by a 50% transparent'g' element. Inside the 'g' is a green circle that partially overlaps the rectangle and a a blue triangle that partially overlaps the circle. The three objects are then outlined by a rectangle stroked with a thin blue line. No filters are applied to the reference graphic.
  2. 第二组使其可以进行背景图像处理并且加入一个空的 'g' 元素此元素调用 ShiftBGAndBlur 滤镜. 此滤镜取当前累积背景图像 (即, 整个引用图形) 作为输入, 平移它的离屏缓冲往下, 并施加模糊, 然后将结果绘制到画布上. 注意此滤镜的离屏缓冲被初始化为透明黑色, 这样允许已经渲染的矩形, 圆和三角形在滤镜渲染它的结果到画布之后还能够被看到.     The second set enables background image processing and adds an empty'g' element which invokes the ShiftBGAndBlur filter. This filter takes the current accumulated background image (i.e., the entire reference graphic) as input, shifts its offscreen down, blurs it, and then writes the result to the canvas. Note that the offscreen for the filter is initialized to transparent black, which allows the already rendered rectangle, circle and triangle to show through after the filter renders its own result to the canvas.
  3. 第三组使其可以进行背景图像处理并且代之以求助在内部 'g' 元素上的ShiftBGAndBlur 滤镜. 在滤镜被使用时的累积背景仅仅包含红色的矩形. 因为内部 'g' 的孩子(即, 圆和三角形) 不是内部'g'元素的背景的一部分并且因为 ShiftBGAndBlur 忽略 SourceGraphic, 内部'g' 的孩子不出现在结果中.       The third set enables background image processing and instead invokes the ShiftBGAndBlur filter on the inner'g' element. The accumulated background at the time the filter is applied contains only the red rectangle. Because the children of the inner'g' (i.e., the circle and triangle) are not part of the inner 'g' element's background and because ShiftBGAndBlur ignores SourceGraphic, the children of the inner'g' do not appear in the result.
  4. 第四组使其可以进行背景图像处理并且在绘制一三角形的 'polygon'元素上调用ShiftBGAndBlur. 在滤镜被使用时的累积的背景包含红色的矩形和忽略在内部 'g' 元素上的'opacity'属性的效果的蓝色圆. (注意：底部模糊的绿色圆不让左边红色三角形被覆盖的部分可以被看到. 这是由于忽略'opacity' 属性的效果.) 因为三角形本身不是累积背景的一部分并且因为 ShiftBGAndBlur 忽略 SourceGraphic,此三角形不出现在结果中.            The fourth set enables background image processing and invokes the ShiftBGAndBlur on the'polygon' element that draws the triangle. The accumulated background at the time the filter is applied contains the red rectangle plus the green circle ignoring the effect of the'opacity' property on the inner 'g' element. (Note that the blurred green circle at the bottom does not let the red rectangle show through on its left side. This is due to ignoring the effect of the'opacity' property.) Because the triangle itself is not part of the accumulated background and because ShiftBGAndBlur ignores SourceGraphic, the triangle does not appear in the result.
  1. 除了用所调用的滤镜ShiftBGAndBlur_WithSourceGraphic代替ShiftBGAndBlur外第五组与第四组是相同的. 除了在平移模糊的背景图像的上面渲染SourceGraphic外ShiftBGAndBlur_WithSourceGraphic 与 ShiftBGAndBlur的效果相同. 此时, SourceGraphic 为蓝色的三角形; 于是, 除了现在出现蓝色的三角形外其结果与第四组的情况是相同的.        The fifth set is the same as the fourth except that filter ShiftBGAndBlur_WithSourceGraphic is invoked instead of ShiftBGAndBlur. ShiftBGAndBlur_WithSourceGraphic performs the same effect as ShiftBGAndBlur, but then renders the SourceGraphic on top of the shifted, blurred background image. In this case, SourceGraphic is the blue triangle; thus, the result is the same as in the fourth case except that the blue triangle now appears.

 

15.7 基本滤镜概览 Filter primitives overview

15.7.1 概览 Overview

本节描述各种基本滤镜, 通过组合这些基本滤镜可以达到特殊的滤镜效果.   This section describes the various filter primtives that can be assembled toachieve a particular filter effect.

除非另作说明, 所有图像滤镜在多通道RGBA样本上进行操作. 那些在非多通道数据上工作得更自然的滤镜(feColorMatrix 和feComponentTransfer) 将临时will temporarily undo and redo premultiplication as specified???. 所有光栅效果的滤镜操作取 1 到 N 个RGBA图像作为输入, 附加性质作为参数, 并且产生一个单一的RGBA图像作为输出.     Unless otherwise stated, all image filters operate on premultiplied RGBAsamples. Filters which work more naturally on non-premultiplied data(feColorMatrix and feComponentTransfer) will temporarily undo and redopremultiplication as specified. All raster effect filtering operations take 1to N input RGBA images, additional attributes as parameters, and produce asingle output RGBA image.

每个基本滤镜的 RGBA 结果都会调整到颜色和透明值的允许范围. 于是, 例如, 如果给定的基本滤镜的结果中有任何负的颜色值或透明值那么都会将其调整为零.     The RGBA result from each filter primitivewill be clamped into the allowable ranges for colors and opacity values. Thus,for example, the result from a given filter primitive will have any negativecolor values or opacity values adjusted up to color/opacity of zero.

一个特定的基本滤镜施行操作的颜色空间是由此基本滤镜的属性'color-interpolation-filters'的值决定的. 一个不同的属性,'color-interpolation' 确定其它颜色操作的颜色空间. 因为这两个属性具有不同的初始值 ('color-interpolation-filters' 的初始值为 linearRGB 而'color-interpolation' 的初始值为 sRGB), 在某些情况下为了达到某种效果 (例如, 当坐标渐变插补时执行滤镜操作) 需要在特定元素上将'color-interpolation' 明确地设置为 linearRGB 或者将 'color-interpolation-filters' 设置为 sRGB . 注意下面的例子不显式设置 'color-interpolation' 和 'color-interpolation-filters', 故在这些例子中使用这些属性的初始值.       The color space in which a particular filter primitive performs its operationsis determined by the value of property'color-interpolation-filters' on the given filterprimitive. A different property,'color-interpolation' determines the color space forother color operations. Because these two properties have different initialvalues ('color-interpolation-filters' has an initial valueof linearRGB whereas 'color-interpolation' has an initial value of sRGB), in some cases to achieve certain results (e.g.,when coordinating gradient interpolation with a filtering operation) it will benecessary to explicitly set'color-interpolation' to linearRGBor 'color-interpolation-filters' to sRGB on particular elements. Note that the examplesbelow do not explicitly set either'color-interpolation' or 'color-interpolation-filters', so the initial valuesfor these properties apply to the examples.

15.7.2 公用性质  Common attributes

下列性质对于大多数基本滤镜都是可用的:   The following attributes are available for most of the filter primitives:

 
<!ENTITY % filter_primitive_attributes
  "x %Coordinate; #IMPLIED
   y %Coordinate; #IMPLIED
   width %Length; #IMPLIED
   height %Length; #IMPLIED
   result CDATA #IMPLIED" >
 
<!ENTITY % filter_primitive_attributes_with_in
  "%filter_primitive_attributes;
   in CDATA #IMPLIED">

性质定义:  Attribute definitions:

x = "<coordinate>"

用于限制给定基本滤镜的计算和渲染的子区域的最小 x 坐标 . 参见 基本滤镜子区域.  The minimum x coordinate for the subregion which restricts calculation andrendering of the given filter primitive. Seefilterprimitive subregion.
Animatable:yes.

y = "<coordinate>"

用于限制给定基本滤镜的计算和渲染的子区域的最小 y 坐标 . 参见 基本滤镜子区域. Theminimum y coordinate for the subregion which restricts calculation andrendering of the given filter primitive. Seefilterprimitive subregion. 

Animatable:yes.

width = "<length>"

用于限制给定基本滤镜的计算和渲染的子区域的宽度 . 参见 基本滤镜子区域. Thewidth of the subregion which restricts calculation and rendering of the givenfilter primitive. Seefilterprimitive subregion.
负值为一种错误 (参见 错误处理). 零值则使给定的基本滤镜的效果无效 (即, 结果为一个透明的黑色图像).   Anegative value is an error (seeErrorprocessing). A value of zero disables the effect of the given filterprimitive (i.e., the result is a transparent black image).
Animatable:yes.

height = "<length>"

用于限制给定基本滤镜的计算和渲染的子区域的高度 . 参见 基本滤镜子区域. The height of the subregion which restricts calculation and rendering of thegiven filter primitive. Seefilterprimitive subregion.
负值为一种错误 (参见 错误处理). 零值则使给定的基本滤镜的效果无效 (即, 结果为一个透明的黑色图像).   Anegative value is an error (seeErrorprocessing). A value of zero disables the effect of the given filterprimitive (i.e., the result is a transparent black image).
Animatable:yes.

result = "<filter-primitive-reference>"

为此基本滤镜指派的名字. 如果提供此名字的话, 那么此基本滤镜所产生的结果图形可以被在相同的 'filter' 元素内随后的基本滤镜的in 性质所引用. 如果不提供此值, 此输出将只能作为下一个在in 性质不提供值的基本滤镜的隐含输入.       Assigned name for this filterprimitive. If supplied, then graphics that result from processing this filterprimitive can be referenced by anin attribute on a subsequent filter primitive withinthe same 'filter' element. If no value is provided, theoutput will only be available for re-use as the implicit input into the nextfilter primitive if that filter primitive provides no value for itsin attribute.
注意 <filter-primitive-reference> 不是一个XML ID; 代之以, 一个 <filter-primitive-reference> 只在一个给定的'filter' 元素内才有意义从而只有本地的作用域. 在一个相同的 'filter' 元素中相同的<filter-primitive-reference> 出现多次是合法的. 当引用时, <filter-primitive-reference>将使用以前最近一个这样的基本滤镜所产生的结果.       Note that a<filter-primitive-reference>is not an XML ID; instead, a <filter-primitive-reference> isonly meaningful within a given'filter' element and thus have only local scope.It is legal for the same <filter-primitive-reference> to appearmultiple times within the same 'filter' element. When referenced, the <filter-primitive-reference>will use the closest preceding filter primitive with the given result.
Animatable:yes.

in = "SourceGraphic|SourceAlpha| BackgroundImage| BackgroundAlpha| FillPaint| StrokePaint| <filter-primitive-reference>"

指定给定的基本滤镜的输入. 其值要么为六种关键词之一要么为与在此同一 'filter' 元素内以前的result性质相配的字符串. 如果不提供此值并且为第一个基本滤镜, 那么此基本滤镜将SourceGraphic 作为其输入. 如果不提供此值并且为后面的基本滤镜, 那么此基本滤镜将使用前一个基本滤镜所产生的结果作为其输入.      Identifies input for the givenfilter primitive. The value can be either one of six keywords or can be astring which matches a previousresult attribute value within the same 'filter' element. If no value is provided andthis is the first filter primitive, then this filter primitive will useSourceGraphic as its input. If no value is providedand this is a subsequent filter primitive, then this filter primitive will usethe result from the previous filter primitive as its input.

如果 result 的值在给定的 'filter' 元素中出现多次, 那么引用将使用以前最近一个具有这样的 result 性质为给定值基本滤镜所产生的结果. 对滤镜结果的前向引用是 一个错误.    If the value for result appears multiple timeswithin a given 'filter' element, then a reference to that resultwill use the closest preceding filter primitive with the given value forattribute result. Forward references to resultsareanerror.

六个关键词的定义:   Definitions for the six keywords:

SourceGraphic

此关键词表示图形元素 作为'filter' 元素的初始输入. 对于光栅效果的基本滤镜, 此 图形元素 将被光栅化为一种图像空间上的初始清楚的RGBA光栅. 未被原始图形触及所留下的像素将被清楚地留下. 此图像被指定在线性RGBA像素下进行渲染. 此图像地alpha 通道接收由精图所指定的反锯齿. (因为光栅是线性的, 这一图像的 alpha 通道将表示每一像素严格的覆盖百分比.)     This keyword represents the graphicselements that were the original input into the 'filter' element. For raster effects filterprimitives, the graphicselements will be rasterized into an initially clear RGBA raster in imagespace. Pixels left untouched by the original graphic will be left clear. Theimage is specified to be rendered in linear RGBA pixels. The alpha channel ofthis image captures any anti-aliasing specified by SVG. (Since the raster islinear, the alpha channel of this image will represent the exact percentcoverage of each pixel.)

SourceAlpha

此关键词表示图形元素 作为'filter' 元素的初始输入.  SourceAlpha  除了只使用alpha通道外同SourceGraphic具有完全相同规则. 输入图像为一个RGB通道为隐含的黑色值而alpha通道与SourceGraphic相同的RGBA图像 .如果使用此选项, 那么某些实现为了得到alpha通道也许需要光栅化此图形元素.      This keyword represents thegraphicselements that were the original input into the 'filter' element. SourceAlphahas all of the same rules as SourceGraphic except that only the alpha channel isused. The input image is an RGBA image consisting of implicitly black colorvalues for the RGB channels, but whose alpha channel is the same asSourceGraphic. If this option is used, then someimplementations might need to rasterize thegraphicselements in order to extract the alpha channel.

BackgroundImage

此关键词表示在调用'filter' 元素之前在滤镜区域下画布的图像快照 . 参见存取背景图像.     This keywordrepresents an image snapshot of the canvas under the filter region at the timethat the'filter' element was invoked. See Accessing the background image.

BackgroundAlpha

除了只使用alpha通道外与BackgroundImage相同. 参见SourceAlpha 和存取背景图像.      Same asBackgroundImage except only the alphachannel is used. See SourceAlpha and Accessingthe background image.

FillPaint

此关键词表示使用此滤镜效果的目标元素的'fill'属性的值作为输入 . 此FillPaint 图像从概念上来说具有无限的范围. 常常这一图像在每一个地方是不透明的, 可是如果"paint"本身有alpha通道也许不是这样, 就像在一个本身包含透明或半透明部分的渐变或模样中那样.      This keyword represents the value of the 'fill' property on the target element for the filtereffect. The FillPaint image has conceptually infinite extent. Frequently thisimage is opaque everywhere, but it might not be if the "paint" itselfhas alpha, as in the case of a gradient or pattern which itself includestransparent or semi-transparent parts.

StrokePaint

此关键词表示使用此滤镜效果的目标元素的'stroke' 属性的值作为输入 . 此StrokePaint 图像从概念上来说具有无限的范围. 常常这一图像在每一个地方是不透明的, 可是如果"paint"本身有alpha通道也许不是这样, 就像在一个本身包含透明或半透明部分的渐变或模样中那样.      This keyword represents the value of the 'stroke' property on the target element for thefilter effect. The StrokePaint image has conceptually infinite extent.Frequently this image is opaque everywhere, but it might not be if the"paint" itself has alpha, as in the case of a gradient or pattern whichitself includes transparent or semi-transparent parts.

Animatable:yes.

15.7.3 基本滤镜子区域  Filter primitivesubregion

所有基本滤镜都有性质 x, y, width 和 height 这些性质用来指定限制给定的基本滤镜的计算和渲染的一个子区域. 这些性质按照其它基本滤镜的坐标和长度性质的相同规则来定义于是按照在'filter' 元素中的性质primitiveUnits 所建立的坐标系来表示值.         All filterprimitives have attributes x, y, widthand height which identify a subregion which restrictscalculation and rendering of the given filter primitive. These attributes aredefined according to the same rules as other filter primitives' coordinate andlength attributes and thus represent values in the coordinate systemestablished by attributeprimitiveUnits on the 'filter' element.

x, y,width 和 height 缺省为所有被引用的节点所定义的子区域的并(即, 最紧密合适的边框). 如果无被引用的节点(例如, 对于'feImage' 或'feTurbulence'而言), 或者被引用的一个或多个节点为一个标准的输入(SourceGraphic, SourceAlpha, BackgroundImage, BackgroundAlpha, FillPaint 或StrokePaint之一), 或对'feTile' 而言(它比较特殊因为它的主要功能是在X和Y上复制被引用的节点因此通常产生较大的结果), 缺省子区域为 0%,0%,100%,100%, 这里百分数是相对滤镜区域的尺寸而言的.       x,y, width and heightdefault to the union (i.e., tightest fitting bounding box) of the subregionsdefined for all referenced nodes. If there are no referenced nodes (e.g., for'feImage' or 'feTurbulence'), or one or more of the referencednodes is a standard input (one ofSourceGraphic, SourceAlpha, BackgroundImage, BackgroundAlpha, FillPaint or StrokePaint), or for 'feTile' (which is special because its principalfunction is to replicate the referenced node in X and Y and thereby produce ausually larger result), the default subregion is 0%,0%,100%,100%, wherepercentages are relative to the dimensions of the filter region.

x, y,width 和 height 担当一个硬性的剪切矩形.   x,y, width and height act as ahard clip clipping rectangle.

所有中间的离屏被定义为不超过x, y, width 和height 与 滤镜区域 的交. 滤镜区域和任何一个 x, y, width 和height 子区域被设立使得所有离屏足够大适应任何像素即使这些像素部分与滤镜区域或x,y,width,height子区域相交.       All intermediate offscreensare defined to not exceed the intersection ofx, y,width and height with thefilterregion. The filter region and any of the x, y,width andheight subregions are to be set upsuch that all offscreens are made big enough to accommodate any pixels whicheven partly intersect with either the filter region or the x,y,width,heightsubregions.

'feTile' 引用一个前面的基本滤镜并且为了填充它自己的基本滤镜子区域 在被引用的基本滤镜的x, y, width 和height 的上面进行平铺.    'feTile' references a previous filter primitive andthen stitches the tiles together based on thex, y,width and height values of the referencedfilter primitive in order to fill its ownfilterprimitive subregion.

15.8 光源元素和属性   Light sourceelements and properties

15.8.1 引言 Introduction

下面的章节定义那些用来定义光源的元素, 'feDistantLight', 'fePointLight' 和 'feSpotLight', 以及定义光的颜色的属性 'lighting-color'.      Thefollowing sections define the elements that define a light source,'feDistantLight', 'fePointLight' and 'feSpotLight', and property 'lighting-color', which defines the color of thelight.

15.8.2 光源'feDistantLight'    Light source 'feDistantLight'

 
<!ELEMENT feDistantLight (animate|set)* >
<!ATTLIST feDistantLight
  %stdAttrs;
  azimuth %Number; #IMPLIED
  elevation %Number; #IMPLIED >

性质定义:    Attribute definitions:

azimuth = "<number>"

光源在XY平面上的以度数为单位的方向角.     Direction angle for the light source onthe XY plane, in degrees.
如果不指定此性质, 那么其效果相当于指定此值为 0.      Ifthe attribute is not specified, then the effect is as if a value of 0 were specified.
Animatable:yes.

elevation = "<number>"

光源在YZ平面上的以度数为单位的方向角.    Direction angle for the light source on the YZplane, in degrees.
如果不指定此性质, 那么其效果相当于指定此值为 0.      Ifthe attribute is not specified, then the effect is as if a value of 0 were specified.
Animatable:yes.

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

%stdAttrs;.

15.8.3光源 'fePointLight'    Lightsource 'fePointLight'

 
<!ELEMENT fePointLight (animate|set)* >
<!ATTLIST fePointLight
  %stdAttrs;
  x %Number; #IMPLIED
  y %Number; #IMPLIED
  z %Number; #IMPLIED >

性质定义:    Attribute definitions:

x = "<number>"

光源在由'filter' 元素的性质primitiveUnits 所建立的坐标系中的X位置.   X location for the light source in the coordinate system established byattributeprimitiveUnits on the 'filter' element.
如果不指定此性质, 那么其效果相当于指定此值为 0.      Ifthe attribute is not specified, then the effect is as if a value of 0 were specified.
Animatable:yes.

y = "<number>"

光源在由'filter' 元素的性质primitiveUnits 所建立的坐标系中的Y位置.   Y location for the light source in the coordinate system established byattributeprimitiveUnits on the 'filter' element.
如果不指定此性质, 那么其效果相当于指定此值为 0.      Ifthe attribute is not specified, then the effect is as if a value of 0 were specified.
Animatable:yes.

z = "<number>"

光源在由'filter' 元素的性质primitiveUnits 所建立的坐标系中的Z位置, 假定, 在 初始坐标系中, 正 Z-轴朝向观看精图内容的人的方向并假定沿 Z-轴一个单位等于在 X 或 Y 中的一个单位.    Zlocation for the light source in the coordinate system established by attributeprimitiveUnits on the 'filter' element, assuming that, in the initialcoordinate system, the positive Z-axis comes out towards the person viewingthe content and assuming that one unit along the Z-axis equals one unit in X orY.
如果不指定此性质, 那么其效果相当于指定此值为 0.      Ifthe attribute is not specified, then the effect is as if a value of 0 were specified.
Animatable:yes.

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

%stdAttrs;.

15.8.4光源 'feSpotLight'   Lightsource 'feSpotLight'

 
<!ELEMENT feSpotLight (animate|set)* >
<!ATTLIST feSpotLight
  %stdAttrs;
  x %Number; #IMPLIED
  y %Number; #IMPLIED
  z %Number; #IMPLIED
  pointsAtX %Number; #IMPLIED
  pointsAtY %Number; #IMPLIED
  pointsAtZ %Number; #IMPLIED
  specularExponent %Number; #IMPLIED
  limitingConeAngle %Number; #IMPLIED >

性质定义:    Attribute definitions:

x = "<number>"

光源在由'filter' 元素的性质primitiveUnits 所建立的坐标系中的X位置.   X location for the light source in the coordinate system established byattributeprimitiveUnits on the 'filter' element.
如果不指定此性质, 那么其效果相当于指定此值为 0.      Ifthe attribute is not specified, then the effect is as if a value of 0 were specified.
Animatable:yes.

y = "<number>"

光源在由'filter' 元素的性质primitiveUnits 所建立的坐标系中的Y位置.   Y location for the light source in the coordinate system established byattributeprimitiveUnits on the 'filter' element.
如果不指定此性质, 那么其效果相当于指定此值为 0.      Ifthe attribute is not specified, then the effect is as if a value of 0 were specified.
Animatable:yes.

z = "<number>"

光源在由'filter' 元素的性质primitiveUnits 所建立的坐标系中的Z位置, 假定, 在 初始坐标系中, 正 Z-轴朝向观看精图内容的人的方向并假定沿 Z-轴一个单位等于在 X 或 Y 中的一个单位.    Zlocation for the light source in the coordinate system established by attributeprimitiveUnits on the 'filter' element, assuming that, in the initialcoordinate system, the positive Z-axis comes out towards the person viewingthe content and assuming that one unit along the Z-axis equals one unit in X orY.
如果不指定此性质, 那么其效果相当于指定此值为 0.      Ifthe attribute is not specified, then the effect is as if a value of 0 were specified.
Animatable:yes.

pointsAtX = "<number>"

光源变尖点在由'filter' 元素的性质primitiveUnits 所建立的坐标系中的X位置.   X location in the coordinate system established by attribute primitiveUnits on the 'filter' element of the point at which the lightsource is pointing.
如果不指定此性质, 那么其效果相当于指定此值为 0.      Ifthe attribute is not specified, then the effect is as if a value of 0 were specified.
Animatable:yes.

pointsAtY = "<number>"

光源变尖点在由'filter' 元素的性质primitiveUnits 所建立的坐标系中的Y位置.   Y location in the coordinate system established by attribute primitiveUnits on the 'filter' element of the point at which the lightsource is pointing.
如果不指定此性质, 那么其效果相当于指定此值为 0.      Ifthe attribute is not specified, then the effect is as if a value of 0 were specified.
Animatable:yes.

pointsAtZ = "<number>"

光源变尖点在由'filter' 元素的性质primitiveUnits 所建立的坐标系中的Z位置, 假定, 在 初始坐标系中, 正 Z-轴朝向观看精图内容的人的方向并假定沿 Z-轴一个单位等于在 X 或 Y 中的一个单位.       Z location of the point at which the light source is pointing, assuming that,in theinitialcoordinate system, the positive Z-axis comes out towards the person viewingthe content and assuming that one unit along the Z-axis equals one unit in X orY.
如果不指定此性质, 那么其效果相当于指定此值为 0.      Ifthe attribute is not specified, then the effect is as if a value of 0 were specified.
Animatable:yes.

specularExponent ="<number>"

控制光源聚焦的指数值.      Exponent value controlling the focusfor the light source.
如果不指定此性质, 那么其效果相当于指定此值为 1.      Ifthe attribute is not specified, then the effect is as if a value of 1 were specified.
Animatable:yes.

limitingConeAngle ="<number>"

一个限制圆锥体限制投射光线的区域. 无光线投射到此圆锥体的外面. limitingConeAngle 表示聚光灯轴线(即光源和光源尖点之间的轴) 和聚光灯锥体的夹角. 用户代理也许在圆锥体的边缘使用某种光滑技术比如反锯齿技术.         A limiting cone which restricts the region where the light is projected. Nolight is projected outside the cone. limitingConeAnglerepresents the angle between the spot light axis (i.e. the axis between thelight source and the point to which it is pointing at) and the spot light cone.User agents should apply a smoothing technique such as anti-aliasing at theboundary of the cone.
如果不指定此性质, 那么将不使用限制圆锥体.     If no value is specified, then no limiting cone will be applied.
Animatable:yes.

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

%stdAttrs;.

15.8.5 The 'lighting-color' property

'lighting-color' 属性定义基本滤镜 'feDiffuseLighting' 和 'feSpecularLighting' 光源的颜色.         The 'lighting-color'property defines the color of the light source for filter primitives'feDiffuseLighting' and 'feSpecularLighting'.

'lighting-color'

Value:  

currentColor |
<color> [icc-color(<name>[,<icccolorvalue>]*)] |
inherit

Initial:  

white

Applies to:  

'feDiffuseLighting' and'feSpecularLighting' elements

Inherited:  

no

Percentages:  

N/A

Media:  

visual

Animatable:  

yes

15.9 基本滤镜 'feBlend'  Filter primitive 'feBlend'

这一滤镜通常使用图像软件混合模式将两个对象合成在一起. 它对两个输入图像执行一种像素级的组合.     This filter composites two objects togetherusing commonly used imaging software blending modes. It performs a pixel-wisecombination of two input images.

 
<!ELEMENT feBlend (animate|set)* >
<!ATTLIST feBlend
  %stdAttrs;
  %PresentationAttributes-FilterPrimitives;
  %filter_primitive_attributes_with_in;
  in2 CDATA #REQUIRED
  mode (normal | multiply | screen | darken | lighten) "normal" >

性质定义:    Attribute definitions:

mode = "normal | multiply |screen | darken | lighten"

图像混合模式之一 (参见下列 表格).缺省值为:normal.    One of the image blending modes (see table below). Default is: normal.
Animatable:yes.

in2 = "(see in attribute)"

混合操作的第二个输入图像. 此性质可以和 in性质取相同的值.     The second input image to the blendingoperation. This attribute can take on the same values as thein attribute.
Animatable:yes.

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

%stdAttrs;,%filter_primitive_attributes_with_in;,%PresentationAttributes-FilterPrimitives;.

对于所有 feBlend 模式, 结果不透明度计算如下:   For all feBlend modes, the result opacity is computed as follows:

 
qr = 1 - (1-qa)*(1-qb)

对于下列合成公式, 使用下列定义:     For the compositing formulas below, the following definitions apply:

 
cr = Result color (RGB) - premultiplied 
qa = Opacity value at a given pixel for image A 
qb = Opacity value at a given pixel for image B 
ca = Color (RGB) at a given pixel for image A - premultiplied 
cb = Color (RGB) at a given pixel for image B - premultiplied

下列表格提供可用混合模式的列表:   The following table provides the list of availableimage blending modes:

图像混合模式 Image Blending Mode

结果颜色计算公式 Formula for computing result color

normal

cr = (1 - qa) * cb + ca

multiply

cr = (1-qa)*cb + (1-qb)*ca + ca*cb

screen

cr = cb + ca - ca * cb

darken

cr = Min ((1 - qa) * cb + ca, (1 - qb) * ca + cb)

lighten

cr = Max ((1 - qa) * cb + ca, (1 - qb) * ca + cb)

'normal' 混合模式等价于 'feComposite' 基本滤镜上的  operator="over" , 与'feMerge' 所用的混合方法相匹配并且在精图中所用的在滤镜之外的所有合成的简单 alpha 合成 相匹配.      'normal' blend mode is equivalent to operator="over" on the 'feComposite' filter primitive, matches theblending method used by 'feMerge' and matches the simplealpha compositing technique used in SVG for all compositing outside offilter effects.

例子 feBlend 说明五种混合模式的例子.    Example feBlend shows examples of the five blendmodes.

 
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
          "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="5cm" height="5cm" viewBox="0 0 500 500"
     xmlns="http://www.w3.org/2000/svg">
  <title>Example feBlend - Examples of feBlend modes</title>
  <desc>Five text strings blended into a gradient,
        with one text string for each of the five feBlend modes.</desc>
  <defs>
    <linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
            x1="100" y1="0" x2="300" y2="0">
      <stop offset="0" stop-color="#000000" />
      <stop offset=".33" stop-color="#ffffff" />
      <stop offset=".67" stop-color="#ff0000" />
      <stop offset="1" stop-color="#808080" />
    </linearGradient>
    <filter id="Normal">
      <feBlend mode="normal" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Multiply">
      <feBlend mode="multiply" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Screen">
      <feBlend mode="screen" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Darken">
      <feBlend mode="darken" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Lighten">
      <feBlend mode="lighten" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
  </defs>
  <rect fill="none" stroke="blue"  
        x="1" y="1" width="498" height="498"/>
  <g enable-background="new" >
    <rect x="100" y="20" width="300" height="460" fill="url(#MyGradient)" />
    <g font-family="Verdana" font-size="75" fill="#888888" fill-opacity=".6" >
      <text x="50" y="90" filter="url(#Normal)" >Normal</text>
      <text x="50" y="180" filter="url(#Multiply)" >Multiply</text>
      <text x="50" y="270" filter="url(#Screen)" >Screen</text>
      <text x="50" y="360" filter="url(#Darken)" >Darken</text>
      <text x="50" y="450" filter="url(#Lighten)" >Lighten</text>
    </g>
  </g>
</svg>

Example feBlend

View thisexample as SVG (SVG-enabled browsers only)
 

 


 

15.10 基本滤镜'feColorMatrix'    Filter primitive 'feColorMatrix'

这一滤镜使用一个矩阵变换:  This filter applies a matrix transformation:

 
| R' |     | a00 a01 a02 a03 a04 |   | R |
 
| G' |     | a10 a11 a12 a13 a14 |   | G |
 
| B' |  =  | a20 a21 a22 a23 a24 | * | B |
 
| A' |     | a30 a31 a32 a33 a34 |   | A |
 
| 1  |     |  0   0   0   0   1  |   | 1 |

在输入图形的每一像素的RGBA颜色和alpha值产生一组新的RGBA颜色和alpha值.        on the RGBA color and alpha values of every pixel on the input graphics toproduce a result with a new set of RGBA color and alpha values.

计算在非多通道颜色值上进行. 如果输入图形由多通道颜色值组成, 那些值会自动转换到非多通道颜色值来适应这一操作.       The calculations are performed on non-premultiplied color values. If the inputgraphics consists of premultiplied color values, those values are automaticallyconverted into non-premultiplied color values for this operation.

这些矩阵常常在alpha通道上执行一个恒等映射. 如果为这种情况, 一种实现能够避免当A = 1时所有像素所进行多通道的恢复和重作的花费.     These matrices often perform an identity mapping in the alpha channel. If thatis the case, an implementation can avoid the costly undoing and redoing of thepremultiplication for all pixels with A = 1.

 
<!ELEMENT feColorMatrix (animate|set)* >
<!ATTLIST feColorMatrix
  %stdAttrs;
  %PresentationAttributes-FilterPrimitives;
  %filter_primitive_attributes_with_in;
  type (matrix | saturate | hueRotate | luminanceToAlpha) "matrix"
  values CDATA #IMPLIED >

性质定义:    Attributedefinitions:

type = "matrix | saturate |hueRotate | luminanceToAlpha"

表示矩阵操作的类型. 关键字 matrix 表示提供一个值的完整的5x4矩阵. 其它关键字表示方便的缩写通常允许使用的颜色操作当执行时不用指定一个完整的矩阵.      Indicates the type of matrix operation.The keyword matrix indicates that a full 5x4matrix of values will be provided. The other keywords represent convenienceshortcuts to allow commonly used color operations to be performed withoutspecifying a complete matrix.
Animatable:yes.

values = "list of<number>s"

values 的内容依赖于性质 type:     The contents of values depends on the value of attribute type:

·   当 type="matrix"时, values是一个20矩阵值的列表 (a00 a01 a02 a03 a04 a10a11 ... a34), 这些值之间用空白字符和/或逗号分隔 .例如, 恒等矩阵可以表示为:    For type="matrix", values is a list of 20 matrix values (a00 a01 a02 a03a04 a10 a11 ... a34), separated by whitespace and/or a comma. For example, theidentity matrix could be expressed as: 

·                       
·                      type="matrix" 
·                      values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"

·   当 type="saturate"时, values为单个实数值 (0 到 1). 一个 saturate 操作等价于下列矩阵操作:      For type="saturate",values is a single real number value (0 to 1). A saturate operation is equivalent to the followingmatrix operation:

·                       
·                      | R' |     |0.213+0.787s  0.715-0.715s  0.072-0.072s 0  0 |   | R |
·                       
·                      | G' |     |0.213-0.213s  0.715+0.285s  0.072-0.072s 0  0 |   | G |
·                       
·                      | B' |  =  |0.213-0.213s  0.715-0.715s  0.072+0.928s 0  0 | * | B |
·                       
·                      | A' |     |           0            0             0  1  0 |   | A |
·                       
·                      | 1  |     |           0            0             0  0  1 |   | 1 |

·   当 type="hueRotate"时, values为单个实数值 (度数). 一个 hueRotate 操作等价于下列矩阵操作:     For type="hueRotate",values is a single one real number value(degrees). A hueRotate operation is equivalent tothe following matrix operation:

·                       
·                      | R' |     | a00  a01  a02  0  0 |   | R |
·                       
·                      | G' |     | a10  a11  a12  0  0 |   | G |
·                       
·                      | B' |  =  | a20  a21  a22  0  0 | * | B |
·                       
·                      | A' |     | 0    0    0    1  0 |   | A |
·                       
·                      | 1  |     | 0    0    0    0  1 |   | 1 |

这里项 a00, a01, 等等. 计算如下:  where the terms a00, a01, etc. are calculated as follows:

 
| a00 a01 a02 |    [+0.213 +0.715 +0.072]
| a10 a11 a12 | =  [+0.213 +0.715 +0.072] +
| a20 a21 a22 |    [+0.213 +0.715 +0.072]
 
                        [+0.787 -0.715 -0.072]
cos(hueRotate value) *  [-0.213 +0.285 -0.072] +
                        [-0.213 -0.715 +0.928]
 
                        [-0.213 -0.715+0.928]
sin(hueRotate value) *  [+0.143 +0.140-0.283]
                        [-0.787 +0.715+0.072]

于是, 色彩矩阵的左上角上的项计算如下:     Thus, the upper left term of the huematrix turns out to be:

 
.213 + cos(hueRotate value)*.787 - sin(hueRotate value)*.213

·   当 type="luminanceToAlpha"时, values不可用. 一个 luminanceToAlpha 操作等价于下列矩阵操作:      For type="luminanceToAlpha",values is not applicable. A luminanceToAlpha operation is equivalent to thefollowing matrix operation:

·                       
·                         | R' |     |      0        0        0  0  0 |   | R |
·                       
·                         | G' |     |      0        0        0  0  0 |   | G |
·                       
·                         | B' |  =  |      0        0        0  0  0 | * | B |
·                       
·                         | A' |     | 0.2125   0.7154   0.0721  0  0 |   | A |
·                       
·                         | 1  |     |      0        0        0  0  1 |   | 1 |

如果不指定此性质, 那么缺省的行为依赖于性质 type的值. 如果 type="matrix", 那么此性质缺省为恒等矩阵. 如果 type="saturate", 那么此性质的缺省值为 1, 其结果等价于恒等矩阵. 如果 type="hueRotate", 那么此性质的缺省值为 0,  其结果等价于恒等矩阵.       If the attribute is not specified, then the default behavior depends on thevalue of attributetype. If type="matrix",then this attribute defaults to the identity matrix. If type="saturate",then this attribute defaults to the value 1,which results in the identify matrix. If type="hueRotate",then this attribute defaults to the value 0,which results in the identify matrix.
Animatable:yes.

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

%stdAttrs;,%filter_primitive_attributes_with_in;,%PresentationAttributes-FilterPrimitives;.

例子 feColorMatrix 给出四种类型feColorMatrix操作的例子.     Example feColorMatrix shows examples of the four typesof feColorMatrix operations.

 
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
          "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="8cm" height="5cm" viewBox="0 0 800 500"
     xmlns="http://www.w3.org/2000/svg">
  <title>Example feColorMatrix - Examples of feColorMatrix operations</title>
  <desc>Five text strings showing the effects of feColorMatrix: 
        an unfiltered text string acting as a reference, 
        use of the feColorMatrix matrix option to convert to grayscale,
        use of the feColorMatrix saturate option,
        use of the feColorMatrix hueRotate option,
        and use of the feColorMatrix luminanceToAlpha option.</desc>
  <defs>
    <linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
            x1="100" y1="0" x2="500" y2="0">
      <stop offset="0" stop-color="#ff00ff" />
      <stop offset=".33" stop-color="#88ff88" />
      <stop offset=".67" stop-color="#2020ff" />
      <stop offset="1" stop-color="#d00000" />
    </linearGradient>
    <filter id="Matrix" filterUnits="objectBoundingBox" 
            x="0%" y="0%" width="100%" height="100%">
      <feColorMatrix type="matrix" in="SourceGraphic"
           values=".33 .33 .33 0 0 
                   .33 .33 .33 0 0 
                   .33 .33 .33 0 0 
                   .33 .33 .33 0 0"/>
    </filter>
    <filter id="Saturate40" filterUnits="objectBoundingBox" 
            x="0%" y="0%" width="100%" height="100%">
      <feColorMatrix type="saturate" in="SourceGraphic" values="40%"/>
    </filter>
    <filter id="HueRotate90" filterUnits="objectBoundingBox" 
            x="0%" y="0%" width="100%" height="100%">
      <feColorMatrix type="hueRotate" in="SourceGraphic" values="90"/>
    </filter>
    <filter id="LuminanceToAlpha" filterUnits="objectBoundingBox" 
            x="0%" y="0%" width="100%" height="100%">
      <feColorMatrix type="luminanceToAlpha" in="SourceGraphic" result="a"/>
      <feComposite in="SourceGraphic" in2="a" operator="in" />
    </filter>
  </defs>
  <rect fill="none" stroke="blue"  
        x="1" y="1" width="798" height="498"/>
  <g font-family="Verdana" font-size="75" 
            font-weight="bold" fill="url(#MyGradient)" >
    <rect x="100" y="0" width="500" height="20" />
    <text x="100" y="90">Unfiltered</text>
    <text x="100" y="190" filter="url(#Matrix)" >Matrix</text>
    <text x="100" y="290" filter="url(#Saturate40)" >Saturate</text>
    <text x="100" y="390" filter="url(#HueRotate90)" >HueRotate</text>
    <text x="100" y="490" filter="url(#LuminanceToAlpha)" >Luminance</text>
  </g>
</svg>

Example feColorMatrix

View thisexample as SVG (SVG-enabled browsers only)
 

15.11  基本滤镜'feComponentTransfer'   Filter primitive 'feComponentTransfer'

这一基本滤镜执行如下数据的各个颜色分量的重映照:   This filter primitive performs component-wise remapping of data as follows:

 
R' = feFuncR( R )
G' = feFuncG( G )
B' = feFuncB( B )
A' = feFuncA( A )

对每个像素而言. 允许象亮度调整, 对比度调整, 颜色平衡 或色差阈处理这些操作.      for every pixel. It allowsoperations like brightness adjustment, contrast adjustment, color balance orthresholding.

计算在非多通道颜色值上进行. 如果输入图形由多通道颜色值组成, 为了进行这一操作这些值将自动转换为非多通道颜色值. (注意如果 feFuncA 为恒等变换 并且在原图形中的所有 alpha 值设置为 1那么能够避免多通道颜色值的恢复与重做 .)    The calculations are performed onnon-premultiplied color values. If the input graphics consists of premultipliedcolor values, those values are automatically converted into non-premultipliedcolor values for this operation. (Note that the undoing and redoing of thepremultiplication can be avoided iffeFuncA isthe identity transform and all alpha values on the source graphic are set to1.)

 
<!ELEMENT feComponentTransfer (feFuncR?,feFuncG?,feFuncB?,feFuncA?) >
<!ATTLIST feComponentTransfer
  %stdAttrs;
  %PresentationAttributes-FilterPrimitives;
  %filter_primitive_attributes_with_in; >
 
<!ENTITY % component_transfer_function_attributes
  "type (identity | table | discrete | linear | gamma) #REQUIRED
   tableValues CDATA #IMPLIED
   slope %Number; #IMPLIED
   intercept %Number; #IMPLIED
   amplitude %Number; #IMPLIED
   exponent %Number; #IMPLIED
   offset %Number; #IMPLIED" >
 
<!ELEMENT feFuncR (animate|set)* >
<!ATTLIST feFuncR
  %stdAttrs;
  %component_transfer_function_attributes; >
 
<!ELEMENT feFuncG (animate|set)* >
<!ATTLIST feFuncG
  %stdAttrs;
  %component_transfer_function_attributes; >
 
<!ELEMENT feFuncB (animate|set)* >
<!ATTLIST feFuncB
  %stdAttrs;
  %component_transfer_function_attributes; >
 
<!ELEMENT feFuncA (animate|set)* >
<!ATTLIST feFuncA
  %stdAttrs;
  %component_transfer_function_attributes; >

这些变换函数的说明通过'feComponentTransfer'的子元素来定义 :    The specification of the transfer functions isdefined by the sub-elements to 'feComponentTransfer':

'feFuncR', 输入图形的红色分量的变换函数   'feFuncR', transfer function for red componentof the input graphic

'feFuncG', 输入图形的绿色分量的变换函数   'feFuncG', transfer function for green component ofthe input graphic

'feFuncB', 输入图形的蓝色分量的变换函数   'feFuncB', transfer function for blue componentof the input graphic

'feFuncA', 输入图形的透明分量的变换函数   'feFuncA', transfer function for alphacomponent of the input graphic

下列性质用于子元素 'feFuncR', 'feFuncG','feFuncB' 和'feFuncA' 来定义变换函数.    The attributes below apply to sub-elements 'feFuncR','feFuncG', 'feFuncB'and 'feFuncA' define the transfer functions.

性质定义:    Attributedefinitions:

type = "identity| table | discrete | linear | gamma"

表示分量变换函数的类型. 函数的类型决定了其它性质的可用性.     Indicates the type of component transferfunction. The type of function determines the applicability of the otherattributes.

·   当为identity时:   For identity: 

C' = C

·   当为table时, 此函数通过性质 tableValues查找表所确定的线性插值来定义, 此性质为了标识n 插补范围提供n+1个值的列表  (即, v0 到 vn)  . 插值使用下列公式.   For table, the functionis defined by linear interpolation into a lookup table by attributetableValues, which provides a list of n+1values (i.e., v0 to vn) in order to identifyninterpolation ranges. Interpolations use the following formula.

对一个值 C 挑选一个 k 使得:   For a value C pick ak such that:

k/N <= C< (k+1)/N

结果C' 通过下列公式给出:   The resultC' is given by:

C' = vk+ (C - k/N)*N * (vk+1 - vk)

·   当为discrete时, 此函数通过性质 tableValues所定义阶梯函数来定义, 此性质为了标识由n 个阶梯组成的阶梯函数提供n个值的列表  (即, v0 到  vn-1)  . 此阶梯函数由下列公式定义.      For discrete, the function is defined by the stepfunction defined by attributetableValues, which provides a list of n values(i.e., v0 to vn-1) in order to identify a step functionconsisting ofn steps. The step function is defined by the followingformula.

对一个值 C 挑选一个 k 使得:   For a value C pick ak such that:

k/N <= C< (k+1)/N

结果C' 通过下列公式给出:   The resultC' is given by:

C' = vk

·   当为 linear时, 此函数通过下列线性方程来定义:   For linear, the function is defined by the following linearequation:

C' = slope * C + intercept

·   当为gamma时, 此函数通过下列指数函数来定义::   Forgamma, the function is defined by the followingexponential function:

C' = amplitude * pow(C, exponent) + offset

Animatable:yes.

tableValues = "(listof<number>s)"

当type="table", 通过空白符和或逗号分隔的<数值> 列表v0,v1,...vn, 此列表用来定义查找表. 一个空的列表导致一个横等变换函数.      When type="table",the list of<number>sv0,v1,...vn, separated by white space and/or a comma, which define thelookup table. An empty list results in an identity transfer function.
如果不提供此性质, 那么效果相当于提供了一个空的列表 .  If theattribute is not specified, then the effect is as if an empty list wereprovided.
Animatable:yes.

slope = "<number>"

当type="linear"时, 线性函数的斜率.    When type="linear", the slope of the linearfunction.
如果不提供此性质, 那么效果相当于指定此性质的值为1.   If the attribute isnot specified, then the effect is as if a value of 1were specified.
Animatable:yes.

intercept = "<number>"

当  type="linear"时, 线性函数的截距.    When type="linear", the intercept ofthe linear function.
如果不提供此性质, 那么效果相当于指定此性质的值为0 .   If the attribute isnot specified, then the effect is as if a value of 0were specified.
Animatable:yes.

amplitude = "<number>"

当  type="gamma"时, gamma函数的振幅.    When type="gamma", the amplitude of the gammafunction.
如果不提供此性质, 那么效果相当于指定此性质的值为1.   If the attribute isnot specified, then the effect is as if a value of 1were specified.
Animatable:yes.

exponent = "<number>"

当  type="gamma"时, gamma函数的指数.    When type="gamma", the exponent of the gammafunction.
如果不提供此性质, 那么效果相当于指定此性质的值为1.   If the attribute isnot specified, then the effect is as if a value of 1were specified.
Animatable:yes.

offset = "<number>"

当  type="gamma"时, gamma函数的偏移量.    When type="gamma", the offset of the gammafunction.
如果不提供此性质, 那么效果相当于指定此性质的值为0 .   If the attribute isnot specified, then the effect is as if a value of 0were specified.
Animatable:yes.

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

%stdAttrs;,%filter_primitive_attributes_with_in;,%PresentationAttributes-FilterPrimitives;.

例子 feComponentTransfer 给出四种类型feComponentTransfer操作的例子.     Example feComponentTransfer shows examples of the fourtypes of feComponentTransfer operations.

 
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
          "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="8cm" height="4cm" viewBox="0 0 800 400"
     xmlns="http://www.w3.org/2000/svg">
  <title>Example feComponentTransfer - Examples of feComponentTransfer operations</title>
  <desc>Four text strings showing the effects of feComponentTransfer: 
        an identity function acting as a reference, 
        use of the feComponentTransfer table option,
        use of the feComponentTransfer linear option,
        and use of the feComponentTransfer gamma option.</desc>
  <defs>
    <linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
            x1="100" y1="0" x2="600" y2="0">
      <stop offset="0" stop-color="#ff0000" />
      <stop offset=".33" stop-color="#00ff00" />
      <stop offset=".67" stop-color="#0000ff" />
      <stop offset="1" stop-color="#000000" />
    </linearGradient>
    <filter id="Identity" filterUnits="objectBoundingBox" 
            x="0%" y="0%" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="identity"/>
        <feFuncG type="identity"/>
        <feFuncB type="identity"/>
        <feFuncA type="identity"/>
      </feComponentTransfer>
    </filter>
    <filter id="Table" filterUnits="objectBoundingBox" 
            x="0%" y="0%" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="table" tableValues="0 0 1 1"/>
        <feFuncG type="table" tableValues="1 1 0 0"/>
        <feFuncB type="table" tableValues="0 1 1 0"/>
      </feComponentTransfer>
    </filter>
    <filter id="Linear" filterUnits="objectBoundingBox" 
            x="0%" y="0%" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="linear" slope=".5" intercept=".25"/>
        <feFuncG type="linear" slope=".5" intercept="0"/>
        <feFuncB type="linear" slope=".5" intercept=".5"/>
      </feComponentTransfer>
    </filter>
    <filter id="Gamma" filterUnits="objectBoundingBox" 
            x="0%" y="0%" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="gamma" amplitude="2" exponent="5" offset="0"/>
        <feFuncG type="gamma" amplitude="2" exponent="3" offset="0"/>
        <feFuncB type="gamma" amplitude="2" exponent="1" offset="0"/>
      </feComponentTransfer>
    </filter>
  </defs>
  <rect fill="none" stroke="blue"  
        x="1" y="1" width="798" height="398"/>
  <g font-family="Verdana" font-size="75" 
            font-weight="bold" fill="url(#MyGradient)" >
    <rect x="100" y="0" width="600" height="20" />
    <text x="100" y="90">Identity</text>
    <text x="100" y="190" filter="url(#Table)" >TableLookup</text>
    <text x="100" y="290" filter="url(#Linear)" >LinearFunc</text>
    <text x="100" y="390" filter="url(#Gamma)" >GammaFunc</text>
  </g>
</svg>

Example feComponentTransfer

Viewthis example as SVG (SVG-enabled browsers only)
 

15.12  基本滤镜 'feComposite'  Filter primitive 'feComposite'

这一滤镜在图像空间中使用Porter-Duff[PORTERDUFF]合成操作:over, in,atop, out, xor对两个输入图像进行像素级的组合. 另外, 可以应用一种组合式的算术操作 (其计算结果限制在 [0..1]中).        This filter performs thecombination of the two input images pixel-wise in image space using one of thePorter-Duff [PORTERDUFF]compositing operations: over, in, atop, out, xor. Additionally, acomponent-wise arithmetic operation (with the result clamped between[0..1]) can be applied.

算术 操作用于将'feDiffuseLighting' 和'feSpecularLighting' 滤镜的输出与纹理数据组合在一起. 它也用于实现分解. 如果已经选定算术 操作, 则每一结果像素使用下列公式计算:    Thearithmetic operation is useful forcombining the output from the 'feDiffuseLighting' and 'feSpecularLighting'filters with texture data. It is also useful for implementingdissolve.If the arithmetic operation is chosen, each result pixel is computedusing the following formula:

result = k1*i1*i2 + k2*i1 + k3*i2 + k4

对于这一基本滤镜而言, 就像在章节基本滤镜子区域中所描述的其结果图像的范围也许会扩大.     For this filter primitive, the extent of theresulting image might grow as described in the section that describes the filterprimitive subregion.

 
<!ELEMENT feComposite (animate|set)* >
<!ATTLIST feComposite
  %stdAttrs;
  %PresentationAttributes-FilterPrimitives;
  %filter_primitive_attributes_with_in;
  in2 CDATA #REQUIRED
  operator (over | in | out | atop | xor | arithmetic) "over"
  k1 %Number; #IMPLIED
  k2 %Number; #IMPLIED
  k3 %Number; #IMPLIED
  k4 %Number; #IMPLIED >

性质定义:    Attributedefinitions:

operator = "over | in | out| atop | xor | arithmetic"

将要执行的合成操作的类型. 除了arithmetic所有类型的operator 对应于在 [PORTERDUFF]中所描述的相应操作.  arithmetic operator 如上所描述的.      Thecompositing operation that is to be performed. All of the operator types except arithmeticmatch the correspond operation as described in [PORTERDUFF].The arithmetic operator is described above.
Animatable:yes.

k1 = "<number>"

只有当operator="arithmetic"才使用.   Only applicableif operator="arithmetic".
如果不提供此性质, 那么效果相当于指定此性质的值为"0".     If the attribute is not specified, the effect is as if a value of "0"were specified.
Animatable:yes.

k2 = "<number>"

只有当operator="arithmetic"才使用.   Only applicableif operator="arithmetic".
如果不提供此性质, 那么效果相当于指定此性质的值为"0".      If the attribute is not specified,the effect is as if a value of "0" were specified.
Animatable:yes.

k3 = "<number>"

只有当operator="arithmetic"才使用.   Only applicableif operator="arithmetic".
如果不提供此性质, 那么效果相当于指定此性质的值为"0".      If the attribute is not specified,the effect is as if a value of "0" were specified.
Animatable:yes.

k4 = "<number>"

只有当operator="arithmetic"才使用.   Only applicableif operator="arithmetic".
如果不提供此性质, 那么效果相当于指定此性质的值为"0".      If the attribute is not specified,the effect is as if a value of "0" were specified.
Animatable:yes.

in2 = "(see in attribute)"

合成操作的第二个输入图像. 这一性质可以和 in性质取相同的值.    The second input image to the compositingoperation. This attribute can take on the same values as thein attribute.
Animatable:yes.

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

%stdAttrs;,%filter_primitive_attributes_with_in;,%PresentationAttributes-FilterPrimitives;.

例子 feComposite 是用于说明六种feComposite 操作类型的例子. 同时它也展示了使用BackgroundImage作为合成操作的一部分的两种不同的技术.        Example feComposite shows examples of the sixtypes of feComposite operations. It also shows two different techniques tousing theBackgroundImage as part of thecompositing operation.

开始两行将蓝色三角形渲染到背景中. 一种使用合成操作之一的滤镜组合红色三角形到蓝色三角形内. 合成的结果被绘制到一个不透明的白色临时表面上, 然后将结果绘制到画布上. (不透明白色临时表面擦掉原先的蓝色三角形.)        The first two rows render bluish triangles into the background. A filter isapplied which composites reddish triangles into the bluish triangles using oneof the compositing operations. The result from compositing is drawn onto anopaque white temporary surface, and then that result is written to the canvas.(The opaque white temporary surface obliterates the original bluish triangle.)

最后两行应用相同的将红色三角形合成到蓝色三角形的操作. 不过, 合成结果直接混合到画布上 (不使用不透明的白色临时表面技术). 在某些情形中, 结果不同于使用不透明的白色临时表面时的结果. 在背景上的蓝色三角形将穿过合成操作产生透明像素的任何地方. 在别的情况下, 合成结果被混合到蓝色三角形中, 最终产生一种不同的颜色值.      The last two rows apply the same compositing operations of reddish trianglesinto bluish triangles. However, the compositing result is directly blended intothe canvas (the opaque white temporary surface technique is not used). In somecases, the results are different than when a temporary opaque white surface isused. The original bluish triangle from the background shines through whereverthe compositing operation results in completely transparent pixel. In othercases, the result from compositing is blended into the bluish triangle,resulting in a different final color value.

 
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
          "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="330" height="195" viewBox="0 0 1100 650"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Example feComposite - Examples of feComposite operations</title>
  <desc>Four rows of six pairs of overlapping triangles depicting
        the six different feComposite operators under different
        opacity values and different clearing of the background.</desc>
        <defs>
    <desc>Define two sets of six filters for each of the six compositing operators.
          The first set wipes out the background image by flooding with opaque white.
          The second set does not wipe out the background, with the result
          that the background sometimes shines through and is other cases
          is blended into itself (i.e., "double-counting").</desc>
    <filter id="overFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/>
      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
    </filter>
    <filter id="inFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/>
      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
    </filter>
    <filter id="outFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/>
      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
    </filter>
    <filter id="atopFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/>
      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
    </filter>
    <filter id="xorFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/>
      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
    </filter>
    <filter id="arithmeticFlood" filterUnits="objectBoundingBox" 
            x="-5%" y="-5%" width="110%" height="110%">
      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
      <feComposite in="SourceGraphic" in2="BackgroundImage" result="comp"
                   operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/>
      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
    </filter>
    <filter id="overNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/>
    </filter>
    <filter id="inNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/>
    </filter>
    <filter id="outNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/>
    </filter>
    <filter id="atopNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/>
    </filter>
    <filter id="xorNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/>
    </filter>
    <filter id="arithmeticNoFlood" filterUnits="objectBoundingBox" 
            x="-5%" y="-5%" width="110%" height="110%">
      <feComposite in="SourceGraphic" in2="BackgroundImage" result="comp"
                   operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/>
    </filter>
    <path id="Blue100" d="M 0 0 L 100 0 L 100 100 z" fill="#00ffff" />
    <path id="Red100" d="M 0 0 L 0 100 L 100 0 z" fill="#ff00ff" />
    <path id="Blue50" d="M 0 125 L 100 125 L 100 225 z" fill="#00ffff" fill-opacity=".5" />
    <path id="Red50" d="M 0 125 L 0 225 L 100 125 z" fill="#ff00ff" fill-opacity=".5" />
    <g id="TwoBlueTriangles">
      <use xlink:href="#Blue100"/>
      <use xlink:href="#Blue50"/>
    </g>
    <g id="BlueTriangles">
      <use transform="translate(275,25)" xlink:href="#TwoBlueTriangles"/>
      <use transform="translate(400,25)" xlink:href="#TwoBlueTriangles"/>
      <use transform="translate(525,25)" xlink:href="#TwoBlueTriangles"/>
      <use transform="translate(650,25)" xlink:href="#TwoBlueTriangles"/>
      <use transform="translate(775,25)" xlink:href="#TwoBlueTriangles"/>
      <use transform="translate(900,25)" xlink:href="#TwoBlueTriangles"/>
    </g>
  </defs>
 
  <rect fill="none" stroke="blue" x="1" y="1" width="1098" height="648"/>
  <g font-family="Verdana" font-size="40" shape-rendering="crispEdges">
    <desc>Render the examples using the filters that draw on top of
          an opaque white surface, thus obliterating the background.</desc>
    <g enable-background="new">
      <text x="15" y="75">opacity 1.0</text>
      <text x="15" y="115" font-size="27">(with feFlood)</text>
      <text x="15" y="200">opacity 0.5</text>
      <text x="15" y="240" font-size="27">(with feFlood)</text>
      <use xlink:href="#BlueTriangles"/>
      <g transform="translate(275,25)">
        <use xlink:href="#Red100" filter="url(#overFlood)" />
        <use xlink:href="#Red50" filter="url(#overFlood)" />
        <text x="5" y="275">over</text>
      </g>
      <g transform="translate(400,25)">
        <use xlink:href="#Red100" filter="url(#inFlood)" />
        <use xlink:href="#Red50" filter="url(#inFlood)" />
        <text x="35" y="275">in</text>
      </g>
      <g transform="translate(525,25)">
        <use xlink:href="#Red100" filter="url(#outFlood)" />
        <use xlink:href="#Red50" filter="url(#outFlood)" />
        <text x="15" y="275">out</text>
      </g>
      <g transform="translate(650,25)">
        <use xlink:href="#Red100" filter="url(#atopFlood)" />
        <use xlink:href="#Red50" filter="url(#atopFlood)" />
        <text x="10" y="275">atop</text>
      </g>
      <g transform="translate(775,25)">
        <use xlink:href="#Red100" filter="url(#xorFlood)" />
        <use xlink:href="#Red50" filter="url(#xorFlood)" />
        <text x="15" y="275">xor</text>
      </g>
      <g transform="translate(900,25)">
        <use xlink:href="#Red100" filter="url(#arithmeticFlood)" />
        <use xlink:href="#Red50" filter="url(#arithmeticFlood)" />
        <text x="-25" y="275">arithmetic</text>
      </g>
    </g>
    <g transform="translate(0,325)" enable-background="new">
    <desc>Render the examples using the filters that do not obliterate
          the background, thus sometimes causing the background to continue
          to appear in some cases, and in other cases the background
          image blends into itself ("double-counting").</desc>
      <text x="15" y="75">opacity 1.0</text>
      <text x="15" y="115" font-size="27">(without feFlood)</text>
      <text x="15" y="200">opacity 0.5</text>
      <text x="15" y="240" font-size="27">(without feFlood)</text>
      <use xlink:href="#BlueTriangles"/>
      <g transform="translate(275,25)">
        <use xlink:href="#Red100" filter="url(#overNoFlood)" />
        <use xlink:href="#Red50" filter="url(#overNoFlood)" />
        <text x="5" y="275">over</text>
      </g>
      <g transform="translate(400,25)">
        <use xlink:href="#Red100" filter="url(#inNoFlood)" />
        <use xlink:href="#Red50" filter="url(#inNoFlood)" />
        <text x="35" y="275">in</text>
      </g>
      <g transform="translate(525,25)">
        <use xlink:href="#Red100" filter="url(#outNoFlood)" />
        <use xlink:href="#Red50" filter="url(#outNoFlood)" />
        <text x="15" y="275">out</text>
      </g>
      <g transform="translate(650,25)">
        <use xlink:href="#Red100" filter="url(#atopNoFlood)" />
        <use xlink:href="#Red50" filter="url(#atopNoFlood)" />
        <text x="10" y="275">atop</text>
      </g>
      <g transform="translate(775,25)">
        <use xlink:href="#Red100" filter="url(#xorNoFlood)" />
        <use xlink:href="#Red50" filter="url(#xorNoFlood)" />
        <text x="15" y="275">xor</text>
      </g>
      <g transform="translate(900,25)">
        <use xlink:href="#Red100" filter="url(#arithmeticNoFlood)" />
        <use xlink:href="#Red50" filter="url(#arithmeticNoFlood)" />
        <text x="-25" y="275">arithmetic</text>
      </g>
    </g>
  </g>
</svg>

Example feComposite

View thisexample as SVG (SVG-enabled browsers only)
 

15.13 基本滤镜'feConvolveMatrix'     Filter primitive 'feConvolveMatrix'

feConvolveMatrix 用于产生矩阵卷积滤镜效果. 一种卷积通过组合输入图像附近的像素来产生一种结果图像. 非常多的图像操作可以通过卷积达到, 这其中包括模糊, 边缘检测, 锐化, 浮雕和倾斜.      feConvolveMatrix applies a matrix convolution filter effect. A convolutioncombines pixels in the input image with neighboring pixels to produce aresulting image. A wide variety of imaging operations can be achieved throughconvolutions, including blurring, edge detection, sharpening, embossing andbeveling.

一个矩阵卷积基于一个 n × m  矩阵 (卷积核) 此矩阵描述如何将输入图像中给定像素值与附近的像素值进行组合生成结果像素值. 每个结果像素是通过将矩阵作用于原像素以及附近的像素得到的. 对每个给定的像素的每个颜色值所使用的基本卷积公式为:       A matrix convolution is basedon an n-by-m matrix (the convolution kernel) which describes how a given pixelvalue in the input image is combined with its neighboring pixel values toproduce a resulting pixel value. Each result pixel is determined by applyingthe kernel matrix to the corresponding source pixel and its neighboring pixels.The basic convolution formula which is applied to each color value for a givenpixel is:

RESULTX,Y = ( 
              SUMI=0 to [orderY-1] { 
                SUMJ=0 to [orderX-1] { 
                  SOURCEX-targetX+J, Y-targetY+I * kernelMatrixorderX-J-1, orderY-I-1 
                } 
              } 
            ) / divisor + bias

这里 "orderX" 和"orderY" 表示 order 性质的 X 和 Y 值, "targetX" 表示targetX性质的值, "targetY" 表示targetY性质的值, "kernelMatrix" 表示kernelMatrix性质的值, "divisor"表示divisor性质的值, 而"bias" 表示bias性质的值.         where"orderX" and "orderY" represent the X and Y values for theorder attribute, "targetX" represents thevalue of the targetX attribute, "targetY" representsthe value of the targetY attribute, "kernelMatrix"represents the value of the kernelMatrix attribute, "divisor"represents the value of the divisor attribute, and "bias" representsthe value of the bias attribute.

注意上述公式在使用的核矩阵中的值需要核矩阵相对源和目标图像旋转180度以便与在很多计算机图像处理教科书中所描述的卷积理论保持一致.         Note in the aboveformulas that the values in the kernel matrix are applied such that the kernelmatrix is rotated 180 degrees relative to the source and destination images inorder to match convolution theory as described in many computer graphicstextbooks.

为了说明, 假设有一个5像素 × 5像素的输入图像, 其颜色通道之一的颜色值如下:        To illustrate, suppose you have a input image which is 5 pixels by 5 pixels,whose color values for one of the color channels are as follows:

 
    0  20  40 235 235
  100 120 140 235 235
  200 220 240 235 235
  225 225 255 255 255
  225 225 255 255 255

并且定义一个3 × 3的卷积核如下:    andyou define a 3-by-3 convolution kernel as follows:

 
  1 2 3
  4 5 6
  7 8 9

让我们集中于图像的第二行和第二列的颜色值 (源像素值为 120). 假设最简单的情况 (这里输入图像的像素网格与核的像素网格完全对齐) 并且假定性质 divisor, targetX 和 targetY取缺省值 , 那么结果颜色值为:        Let's focus on the color value at the second row and second column of the image(source pixel value is 120). Assuming the simplest case (where the inputimage's pixel grid aligns perfectly with the kernel's pixel grid) and assumingdefault values for attributes divisor, targetX and targetY, thenresulting color value will be:

 
(9*  0 + 8* 20 + 7* 40 +
6*100 + 5*120 + 4*140 +
3*200 + 2*220 + 1*240) / (9+8+7+6+5+4+3+2+1)

因为它们在像素上进行操作, 故矩阵卷积必然与分辨率有关. 为了使 'feConvolveMatrix 产生分辨率无关的结果 , 应该要么为在元素 'filter' 中的性质filterRes 并且/或者为性质kernelUnitLength提供一个明确的值.        Because they operate on pixels,matrix convolutions are inherently resolution-dependent. To make 'feConvolveMatrix produce resolution-independentresults, an explicit value should be provided for either thefilterRes attribute on the 'filter' element and/or attribute kernelUnitLength.

kernelUnitLength, 与其它性质相结合, 在滤镜效果坐标系 (即, 由性质primitiveUnits所建立的坐标系  )中定义一个隐式的像素网格. 如果由kernelUnitLength建立的像素网格不与由性质filterRes (隐式地或显式地)建立像素网格比例不匹配, 那么输入图像将被临时重新缩放以便其像素与kernelUnitLength相匹配. 卷积在重采样的图像上进行. 在应用卷积之后, 图像将按原来的分辨率进行采样.       kernelUnitLength, in combination with the otherattributes, defines an implicit pixel grid in the filter effects coordinatesystem (i.e., the coordinate system established by theprimitiveUnits attribute). If the pixel gridestablished by kernelUnitLength is not scaled to match the pixelgrid established by attributefilterRes (implicitly or explicitly), then the inputimage will be temporarily rescaled to match its pixels withkernelUnitLength. The convolution happens on theresampled image. After applying the convolution, the image is resampled back tothe original resolution.

当为了与由kernelUnitLength定义的坐标系相匹配在进行卷积之前而对图像进行重采样时, 或者在进行卷积之后与设备坐标系相匹配而进行重采样时, 推荐高质量阅读器 利用适当的插补技术, 例如双线性或双三次插值. 依赖于可用的插补的速度 , 这一选择可能受到'image-rendering'属性设置的影响. 注意实现在当不必产生精确结果的时候也许选择最小化或省去重采样的方法, 例如当文档被缩小使得kernelUnitLength比一个设备像素还小的时候.         When the image must beresampled to match the coordinate system defined by kernelUnitLength prior to convolution, or resampledto match the device coordinate system after convolution, it is recommended thathighquality viewers make use of appropriate interpolation techniques, forexample bilinear or bicubic. Depending on the speed of the availableinterpolents, this choice may be affected by the'image-rendering' property setting. Note thatimplementations might choose approaches that minimize or eliminate resamplingwhen not necessary to produce proper results, such as when the document iszoomed out such that kernelUnitLength isconsiderably smaller than a device pixel.

 
<!ELEMENT feConvolveMatrix (animate|set)* >
<!ATTLIST feConvolveMatrix
  %stdAttrs;
  %PresentationAttributes-FilterPrimitives;
  %filter_primitive_attributes_with_in;
  order %NumberOptionalNumber; #REQUIRED
  kernelMatrix CDATA #REQUIRED
  divisor %Number; #IMPLIED
  bias %Number; #IMPLIED
  targetX %Integer; #IMPLIED
  targetY %Integer; #IMPLIED
  edgeMode (duplicate|wrap|none) "duplicate" 
  kernelUnitLength %NumberOptionalNumber; #IMPLIED 
  preserveAlpha %Boolean; #IMPLIED >

性质定义:    Attributedefinitions:

order = "<number-optional-number>"

表示kernelMatrix的每一维元素的数目 . 所提供的值必须为大于零的<integer>.第一个数,<orderX>, 表示矩阵的列数. 第二个数,<orderY>, 表示矩阵的行数. 如果不提供<orderY> , 则缺省等于 <orderX>.       Indicates thenumber of cells in each dimension for kernelMatrix.The values provided must be<integer>sgreater than zero. The first number, <orderX>, indicates the number ofcolumns in the matrix. The second number, <orderY>, indicates the numberof rows in the matrix. If <orderY> is not provided, it defaults to<orderX>.
一个典型的值为order="3".推荐使用较小的值 (例如, 3) ; 较高的值也许产生非常高的 CPU 系统开销并且常常此时所产生的结果对性能的影响是值得的.   A typical value is order="3". It is recommended that only smallvalues (e.g., 3) be used; higher values may result in very high CPU overheadand usually do not produce results that justify the impact on performance.
如果不指定此性质, 那么效果相当于指定此性质的值为"3".      If the attribute is not specified, the effect is as if a value of "3"were specified.
Animatable:yes.

kernelMatrix ="<list of numbers>"

构成卷积核的数值<number>的列表. 数值之间通过空白字符和/或逗号风格. 此列表中项的数目必须等于<orderX> 乘以<orderY>.      The list of<number>sthat make up the kernel matrix for the convolution. Values are separated byspace characters and/or a comma. The number of entries in the list must equal<orderX> times <orderY>.
Animatable:yes.

divisor = "<number>"

在使用kernelMatrix到输入图像上产生一个数值之后, 此数值 除以divisor产生最后的目的颜色值. 当其值为所有矩阵中项的值的和时则对结果的颜色亮度具有暗化作用. 当其值为零时为一种错误. 缺省值为在kernelMatrix中的所有值的和 , 如果此时和为零, 则将其设置为1.       After applying the kernelMatrix to the input image to yield a number, thatnumber is divided by divisor to yield the finaldestination color value. A divisor that is the sum of all the matrix valuestends to have an evening effect on the overall color intensity of the result.It is an error to specify a divisor of zero. The default value is the sum ofall values in kernelMatrix, with the exception that if the sum is zero, thenthe divisor is set to 1.
Animatable:yes.

bias = "<number>"

在使用kernelMatrix到输入图像上产生一个数值并且使用 divisor之后, bias 被加到每个分量中. bias 的一种使用为当滤镜的响应值为零时期望有.5 的灰度值. 如果不指定 bias , 那么效果相当于指定其值为零.     After applying the kernelMatrixto the input image to yield a number and applying thedivisor, the biasattribute is added to each component. One application of biasis when it is desirable to have .5 gray value be the zero response of thefilter. If bias is not specified, then the effectis as if a value of zero were specified.
Animatable:yes.

targetX = "<integer>"

确定卷积矩阵相对于在输入图像一个给定目标像素的X位置. 矩阵最左边列其列数为零. 此值必须在范围之内: 0 <= targetX <orderX. 缺省, 卷积矩阵位于输入图像的每一像素在 X 的中心 (即, targetX = floor ( orderX / 2)).        Determines the positioning in Xof the convolution matrix relative to a given target pixel in the input image.The leftmost column of the matrix is column number zero. The value must be suchthat: 0 <= targetX < orderX. By default, the convolution matrix iscentered in X over each pixel of the input image (i.e., targetX = floor (orderX / 2 )).
Animatable:yes.

targetY = "<integer>"

确定卷积矩阵相对于在输入图像一个给定目标像素的Y 位置. 矩阵最上面行其行数为零. 此值必须在范围之内: 0 <= targetY <orderY. 缺省, 卷积矩阵位于输入图像的每一像素在 Y 的中心 (即, targetY = floor ( orderY / 2)).       Determines the positioning in Y of theconvolution matrix relative to a given target pixel in the input image. Thetopmost row of the matrix is row number zero. The value must be such that: 0<= targetY < orderY. By default, the convolution matrix is centered in Yover each pixel of the input image (i.e., targetY = floor ( orderY / 2 )).
Animatable:yes.

edgeMode = "duplicate | wrap | none"

确定当核定位于或接近于输入图像的边缘时如何扩展输入图像的颜色值使得矩阵操作可以继续使用.        Determines how to extendthe input image as necessary with color values so that the matrix operationscan be applied when the kernel is positioned at or near the edge of the inputimage.

"duplicate" 表示必要时沿着每一边扩展输入图像通过重复输入图像的边缘的颜色值来实现.     "duplicate" indicates that theinput image is extended along each of its borders as necessary by duplicatingthe color values at the given edge of the input image.

 
原始 N×M 图像, 这里 m=M-1 并且 n=N-1:    Original N-by-M image, where m=M-1 and n=N-1:
          11 12 ... 1m 1M
          21 22 ... 2m 2M
          .. .. ... .. ..
          n1 n2 ... nm nM
          N1 N2 ... Nm NM
 
通过使用"duplicate"扩展两个像素 :   Extended by two pixels using "duplicate":
  11 11   11 12 ... 1m 1M   1M 1M
  11 11   11 12 ... 1m 1M   1M 1M
 
  11 11   11 12 ... 1m 1M   1M 1M
  21 21   21 22 ... 2m 2M   2M 2M
  .. ..   .. .. ... .. ..   .. ..
  n1 n1   n1 n2 ... nm nM   nM nM
  N1 N1   N1 N2 ... Nm NM   NM NM
 
  N1 N1   N1 N2 ... Nm NM   NM NM
  N1 N1   N1 N2 ... Nm NM   NM NM

"wrap" 表示通过图像的对边的颜色值来扩展输入图像.    "wrap" indicates that the input image is extended by taking the colorvalues from the opposite edge of the image.

 
通过使用"wrap"扩展两个像素 :   Extended by two pixels using "wrap":
  nm nM   n1 n2 ... nm nM   n1 n2
  Nm NM   N1 N2 ... Nm NM   N1 N2
 
  1m 1M   11 12 ... 1m 1M   11 12
  2m 2M   21 22 ... 2m 2M   21 22
  .. ..   .. .. ... .. ..   .. ..
  nm nM   n1 n2 ... nm nM   n1 n2
  Nm NM   N1 N2 ... Nm NM   N1 N2
 
  1m 1M   11 12 ... 1m 1M   11 12
  2m 2M   21 22 ... 2m 2M   21 22

"none" 表示用R, G, B和A的值为零的像素来扩展输入图像.      "none" indicates that the input image is extended with pixel valuesof zero for R, G, B and A.

Animatable:yes.

kernelUnitLength ="<number-optional-number>"

第一个数为值 <dx> . 第二个数为值 <dy>. 如果不指定值 <dy> , 缺省与<dx>的值相同 . 表示在 kernelMatrix中以当前滤镜单位(即, 由性质primitiveUnits的值决定的单位 )为单位的分别在连续的列和行之间的预定距离. 通过指定kernelUnitLength的值 , 核变成一个可缩放定义的抽象坐标系. 如果不指定 kernelUnitLength , 则其缺省值为位图缓冲中的一个像素, 它为基于像素的坐标系, 于是意味着不可缩放. 为了使显示媒体和用户代理之间达到某种程度的兼容性, 需要至少为filterRes和kernelUnitLength中的一个提供一个值 . 在某些实现中, 如果临时缓冲图像的像素网格与核的像素网格相对齐则可以提供最大的兼容性结果以及最快的性能.            The first number is the <dx> value. The second number is the <dy>value. If the <dy> value is not specified, it defaults to the same valueas <dx>. Indicates the intended distance in current filter units (i.e.,units as determined by the value of attributeprimitiveUnits) between successive columns and rows,respectively, in the kernelMatrix. By specifyingvalue(s) for kernelUnitLength, the kernel becomesdefined in a scalable, abstract coordinate system. If kernelUnitLengthis not specified, the default value is one pixel in the offscreen bitmap, whichis a pixel-based coordinate system, and thus potentially not scalable. For somelevel of consistency across display media and user agents, it is necessary thata value be provided for at least one of filterResand kernelUnitLength. In some implementations, themost consistent results and the fastest performance will be achieved if thepixel grid of the temporary offscreen images aligns with the pixel grid of thekernel.
零值和负值为一种错误 (参见 错误处理).      A negative or zero value is an error (see Errorprocessing).
Animatable:yes.

preserveAlpha ="false | true"

值为false 表示卷积将用于所有通道, 包括alpha通道.      A value of false indicates that the convolutionwill apply to all channels, including the alpha channel.
值为 true 表示卷积将仅用于颜色通道, 不包括 alpha通道.在这种情况下, 滤镜将临时不分解颜色分量, 用于核中, 然后结束时重新分解到各个通道.        A value of true indicates that the convolutionwill only apply to the color channels. In this case, the filter willtemporarily unpremultiply the color component values, apply the kernel, andthen re-premultiply at the end.
如果不指定 preserveAlpha , 那么其效果相当于指定了值 false.       If preserveAlphais not specified, then the effect is as if a value of falsewere specified.
Animatable:yes.

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

%stdAttrs;,%filter_primitive_attributes_with_in;,%PresentationAttributes-FilterPrimitives;.

15.14 基本滤镜'feDiffuseLighting'   Filter primitive 'feDiffuseLighting'

这一基本滤镜使用alpha通道作为一个bump地图照亮一个图像. 其结果图像为一种基于光亮颜色并且各处的alpha = 1.0 的 RGBA 不透明图像. 光照计算遵从Phong 光照模型的标准的散射分量 . 结果图像依赖于光照颜色, 光照位置和输入bump地图的表面几何.       This filter primitive lights an image using the alpha channel as a bump map.The resulting image is an RGBA opaque image based on the light color with alpha= 1.0 everywhere. The lighting calculation follows the standard diffusecomponent of the Phong lighting model. The resulting image depends on the lightcolor, light position and surface geometry of the input bump map.

由这一基本滤镜所产生的光照地图通过使用多项算术 'feComposite' 合成方法与纹理图像进行组合 . 可以在应用它到纹理图像之前将加入几个这种光照地图一起来仿真多个光源.        The light map producedby this filter primitive can be combined with a texture image using themultiply term of thearithmetic 'feComposite' compositing method.Multiple light sources can be simulated by adding several of these light mapstogether before applying it to the texture image.

下面的公式使用 3x3 滤镜. 因为它们在像素上进行操作, 这一滤镜自然与分辨率相关的. 为了使 'feDiffuseLighting' 产生分辨率无关的结果, 应该为'filter'元素上的filterRes性质并且/或者性质kernelUnitLength提供一种显式的值.        The formulas below make use of 3x3filters. Because they operate on pixels, such filters are inherentlyresolution-dependent. To make 'feDiffuseLighting'produce resolution-independent results, an explicit value should be providedfor either thefilterRes attribute on the 'filter' element and/or attribute kernelUnitLength.

kernelUnitLength, 与其它性质相组合, 在滤镜效果坐标系(即, 由性质primitiveUnits建立的坐标系)上定义一个隐式像素网格 . 如果由 kernelUnitLength 所建立的像素网格不能通过缩放与由性质filterRes(隐式的或显式的)所建立的像素网格相匹配, 那么输入图像将临时重新缩放使其像素与kernelUnitLength匹配.  3x3 滤镜矩阵被用于重采样图像. 在应用滤镜之后, 图像被重采样回它原先的分辨率.        kernelUnitLength, in combination with the otherattributes, defines an implicit pixel grid in the filter effects coordinatesystem (i.e., the coordinate system established by theprimitiveUnits attribute). If the pixel gridestablished by kernelUnitLength is not scaled to match the pixelgrid established by attributefilterRes (implicitly or explicitly), then the inputimage will be temporarily rescaled to match its pixels withkernelUnitLength. The 3x3 filters are applied to theresampled image. After applying the filter, the image is resampled back to itsoriginal resolution.

当图像必须重采样时, 推荐 高质量阅读器 使用适当的插补技术, 例如双线性或双三次插值. 依赖于可用的插补的速度 , 这一选择可能受到'image-rendering'属性设置的影响. 注意实现在当不必产生精确结果的时候也许选择最小化或省去重采样的方法, 例如当文档被缩小使得kernelUnitLength比一个设备像素还小的时候.              When the image must be resampled, it is recommended that highquality viewers make use of appropriate interpolation techniques, forexample bilinear or bicubic. Depending on the speed of the availableinterpolents, this choice may be affected by the'image-rendering' property setting. Note thatimplementations might choose approaches that minimize or eliminate resamplingwhen not necessary to produce proper results, such as when the document iszoomed out such that kernelUnitLength isconsiderably smaller than a device pixel.

对于后面的公式, Norm(Ax,Ay,Az) 函数定义如下:    For the formulas that follow, theNorm(Ax,Ay,Az) function is defined as:

Norm(Ax,Ay,Az)= sqrt(Ax^2+Ay^2+Az^2)

结果RGBA图像计算如下:      The resulting RGBA image is computed as follows:

Dr = kd * N.L * Lr
Dg = kd * N.L * Lg
Db = kd * N.L * Lb
Da = 1.0

这里  where

kd = 散射光照常数  diffuse lightingconstant
N = 表面单位法向量, x 和 y的函数    surfacenormal unit vector, a function of x and y
L = 从表面指向光源的单位向量, 当为点光源时为 x 和 y的函数     unitvector pointing from surface to light, a function of x and y in the point andspot light cases
Lr,Lg,Lb = 光源的RGB分量, 当为点光源时为 x 和 y的函数          RGB components of light, a function of x and y in the spot light case

N 为 x 和 y的函数并且依赖于下列表面渐变:      N is a function of x and y and depends on the surface gradient as follows:

通过输入 alpha 图像Ain (x,y)所描述的表面为:    The surface described by the input alpha image Ain (x,y) is:

Z (x,y) = surfaceScale * Ain(x,y)

表面法向量通过使用Sobel 渐变3x3滤镜矩阵来计算. 根据给定的像素在内部或在边缘而使用不同的滤镜核. 对于每种情况, 其公式为:      Surface normal is calculated using the Sobel gradient 3x3 filter. Differentfilter kernels are used depending on whether the given pixel is on the interioror an edge. For each case, the formula is:

Nx (x,y)= - surfaceScale *FACTORx *
           (Kx(0,0)*I(x-dx,y-dy) +Kx(1,0)*I(x,y-dy) + Kx(2,0)*I(x+dx,y-dy) +
            Kx(0,1)*I(x-dx,y)   +Kx(1,1)*I(x,y)   + Kx(2,1)*I(x+dx,y)   +
            Kx(0,2)*I(x-dx,y+dy) +Kx(1,2)*I(x,y+dy) + Kx(2,2)*I(x+dx,y+dy))
Ny (x,y)= - surfaceScale * FACTORy *
           (Ky(0,0)*I(x-dx,y-dy) +Ky(1,0)*I(x,y-dy) + Ky(2,0)*I(x+dx,y-dy) +
            Ky(0,1)*I(x-dx,y)   +Ky(1,1)*I(x,y)   + Ky(2,1)*I(x+dx,y)   +
            Ky(0,2)*I(x-dx,y+dy) +Ky(1,2)*I(x,y+dy) + Ky(2,2)*I(x+dx,y+dy))
Nz (x,y) = 1.0

N = (Nx, Ny, Nz) / Norm((Nx,Ny,Nz))

在这些公式里面, 值dx 和 dy  (例如, I(x-dx,y-dy)),表示相对于给定的位置(x,y)的有限增量用于估计在此点表面的斜率. 这些有限增量由性质kernelUnitLength的值(显式的或隐式的)来确定.       In these formulas, the dx and dy values(e.g., I(x-dx,y-dy)), represent deltas relative to a given(x,y)position for the purpose of estimating the slope of the surface at that point.These deltas are determined by the value (explicit or implicit) of attributekernelUnitLength.

Top/left corner:

FACTORx=2/(3*dx)
Kx =
    |  0  0  0 |
    |  0 -2  2 |
    |  0 -1  1 |

FACTORy=2/(3*dy)
Ky =  
    |  0  0  0 |
    |  0 -2 -1 |
    |  0  2  1 |

Top row:

FACTORx=1/(3*dx)
Kx =
    |  0  0  0 |
    | -2  0  2 |
    | -1  0  1 |

FACTORy=1/(2*dy)
Ky =  
    |  0  0  0 |
    | -1 -2 -1 |
    |  1  2  1 |

Top/right corner:

FACTORx=2/(3*dx)
Kx =
    |  0  0  0 |
    | -2  2  0 |
    | -1  1  0 |

FACTORy=2/(3*dy)
Ky =  
    |  0  0  0 |
    | -1 -2  0 |
    |  1  2  0 |

Left column:

FACTORx=1/(2*dx)
Kx =
    | 0 -1  1 |
    | 0 -2  2 |
    | 0 -1  1 |

FACTORy=1/(3*dy)
Ky =  
    |  0 -2 -1 |
    |  0  0  0 |
    |  0  2  1 |

Interior pixels:

FACTORx=1/(4*dx)
Kx =
    | -1  0  1 |
    | -2  0  2 |
    | -1  0  1 |

FACTORy=1/(4*dy)
Ky =  
    | -1 -2 -1 |
    |  0  0  0 |
    |  1  2  1 |

Right column:

FACTORx=1/(2*dx)
Kx =
    | -1  1  0|
    | -2  2  0|
    | -1  1  0|

FACTORy=1/(3*dy)
Ky =  
    | -1 -2  0 |
    |  0  0  0 |
    |  1  2  0 |

Bottom/left corner:

FACTORx=2/(3*dx)
Kx =
    | 0 -1  1 |
    | 0 -2  2 |
    | 0  0  0 |

FACTORy=2/(3*dy)
Ky =  
    |  0 -2 -1 |
    |  0  2  1 |
    |  0  0  0 |

Bottom row:

FACTORx=1/(3*dx)
Kx =
    | -1  0  1 |
    | -2  0  2 |
    |  0  0  0 |

FACTORy=1/(2*dy)
Ky =  
    | -1 -2 -1 |
    |  1  2  1 |
    |  0  0  0 |

Bottom/right corner:

FACTORx=2/(3*dx)
Kx =
    | -1  1  0 |
    | -2  2  0 |
    |  0  0  0 |

FACTORy=2/(3*dy)
Ky =  
    | -1 -2  0 |
    |  1  2  0 |
    |  0  0  0 |

L, 从图像样本到光源的单位向量, 计算如下:       L, the unit vector from the image sample to the light, is calculated asfollows:

对于无限光源它为常数:      For Infinite light sources it is constant:

Lx =cos(azimuth)*cos(elevation)
Ly = sin(azimuth)*cos(elevation)
Lz = sin(elevation)

对于点光源它为位置的函数:      For Point and spot lights it is a function of position:

Lx = Lightx - x
Ly = Lighty - y
Lz = Lightz - Z(x,y)

L = (Lx, Ly, Lz) / Norm(Lx, Ly,Lz)

这里 Lightx,Lighty, 和Lightz 为输入光源的位置.        where Lightx,Lighty, and Lightzare the input light position.

Lr,Lg,Lb, 光源颜色向量, 仅在点光源的情况下为位置的函数:      Lr,Lg,Lb, the light color vector, is afunction of position in the spot light case only:

Lr = Lightr*pow((-L.S),specularExponent)
Lg = Lightg*pow((-L.S),specularExponent)
Lb = Lightb*pow((-L.S),specularExponent)

这里 S 为从光源到点(pointsAtX, pointsAtY, pointsAtZ)在x-y平面的单位向量:       where S is the unit vector pointing from the light to the point (pointsAtX,pointsAtY, pointsAtZ) in the x-y plane:

Sx = pointsAtX - Lightx
Sy = pointsAtY - Lighty
Sz = pointsAtZ - Lightz

S = (Sx, Sy, Sz) / Norm(Sx, Sy,Sz)

如果L.S为正的, 无光源出现. (Lr = Lg= Lb = 0)       If L.S is positive, nolight is present. (Lr = Lg = Lb = 0)

 
<!ELEMENT feDiffuseLighting ((feDistantLight|fePointLight|feSpotLight),(animate|set|animateColor)*) >
<!ATTLIST feDiffuseLighting
  %stdAttrs;
  class %ClassList; #IMPLIED
  style %StyleSheet; #IMPLIED
  %PresentationAttributes-Color;
  %PresentationAttributes-FilterPrimitives;
  %PresentationAttributes-LightingEffects;
  %filter_primitive_attributes_with_in;
  surfaceScale %Number; #IMPLIED
  diffuseConstant %Number; #IMPLIED 
  kernelUnitLength %NumberOptionalNumber; #IMPLIED >

性质定义:    Attributedefinitions:

surfaceScale ="<number>"

当Ain = 1时表面的高度 .    height of surface when Ain = 1.
如果不提供此性质, 那么效果相当于指定此性质的值为1.      Ifthe attribute is not specified, then the effect is as if a value of 1 were specified.
Animatable:yes.

diffuseConstant ="<number>"

在Phong光照模型中的kd . 在精图中, 可以为任何非负数.       kd in Phong lighting model. InSVG, this can be any non-negative number.
如果不提供此性质, 那么效果相当于指定此性质的值为1.      Ifthe attribute is not specified, then the effect is as if a value of 1 were specified.
Animatable:yes.

kernelUnitLength ="<number-optional-number>"

第一个数为值 <dx> . 第二个数为值 <dy>. 如果不指定值 <dy> , 缺省与<dx>的值相同 . 表示在 表面法向量计算公式中以当前滤镜单位(即, 由性质primitiveUnits的值决定的单位 )为单位的分别对于dx 和 dy的预定距离. 通过指定kernelUnitLength的值 , 核变成一个可缩放定义的抽象坐标系. 如果不指定 kernelUnitLength ,dx 和 dy的值将表示相对于给定的位置(x,y)非常小的有限增量, 此时在某种情况下可以实现为位图缓冲中的一个像素, 它为基于像素的坐标系, 于是意味着不可缩放. 为了使显示媒体和用户代理之间达到某种程度的兼容性, 需要至少为filterRes和kernelUnitLength中的一个提供一个值 . 在某些实现中, 如果临时缓冲图像的像素网格与核的像素网格相对齐则可以提供最大的兼容性结果以及最快的性能.            The first number is the <dx> value. The second number is the <dy>value. If the <dy> value is not specified, it defaults to the same valueas <dx>. Indicates the intended distance in current filter units (i.e.,units as determined by the value of attributeprimitiveUnits) for dx and dy,respectively, in the surfacenormal calculation formulas. By specifying value(s) for kernelUnitLength, the kernel becomes defined in ascalable, abstract coordinate system. If kernelUnitLengthis not specified, thedx and dy values should represent very small deltas relative to a given(x,y)position, which might be implemented in some cases as one pixel in theintermediate image offscreen bitmap, which is a pixel-based coordinate system,and thus potentially not scalable. For some level of consistency across displaymedia and user agents, it is necessary that a value be provided for at leastone of filterRes and kernelUnitLength.Discussion of intermediate images are in theIntroductionand in the description of attribute filterRes.
零值和负值为一种错误 (参见 错误处理).      A negative or zero value is an error (see Errorprocessing).
Animatable:yes.

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

%stdAttrs;,%filter_primitive_attributes_with_in;,%PresentationAttributes-Color;,%PresentationAttributes-FilterPrimitives;,%PresentationAttributes-LightingEffects;.

光源通过子元素 'feDistantLight', 'fePointLight' 或 'feSpotLight'之一来定义. 光源的颜色通过属性'lighting-color'来定义.           The light source is defined by one of the child elements 'feDistantLight', 'fePointLight' or 'feSpotLight'. The light color isspecified by property'lighting-color'.

 

15.15 基本滤镜'feDisplacementMap'   Filter primitive 'feDisplacementMap'

这一基本滤镜使用来自in2图像的像素值在空间上对来自in的图像在空间上进行移动 . 这是所施行的变换:      This filter primitive uses thepixels values from the image fromin2 to spatially displace the image from in. This is the transformation to be performed:

 
P'(x,y) <- P( x + scale * ((XC(x,y) - .5), y + scale * (YC(x,y) - .5))

这里 P(x,y) 为输入图像, in, 而 P'(x,y) 为目的图像. XC(x,y) 和YC(x,y) 为由xChannelSelector 和 yChannelSelector所指派的分量值. 例如, 为了使用in2中的R 分量来控制在x 上的偏移并且使用图像2上的G 分量来控制在 y上的偏移, 设置xChannelSelector 为"R" 并且设置 yChannelSelector 为"G".     where P(x,y) is the input image,in, and P'(x,y) is the destination. XC(x,y) andYC(x,y) are the component values of the designated by thexChannelSelectorand yChannelSelector. For example, to use the R component ofin2 to control displacement in x and the G componentof Image2 to control displacement in y, setxChannelSelector to"R" and yChannelSelector to "G".

偏移映照定义所施行映照的逆.    The displacement map defines the inverse of the mapping performed.

使用来自 in2 的像素值的所施行的计算使用非多通道的颜色值. 如果来自in2的图像由多通道的颜色值组成, 这些值在施行这一操作之前将自动转换成非多通道颜色值.        The calculations usingthe pixel values from in2 are performed using non-premultiplied colorvalues. If the image from in2 consists of premultiplied color values, thosevalues are automatically converted into non-premultiplied color values beforeperforming this operation.

这一滤镜可以在输入上产生任意非局部化的效果而这要求在处理管道中大量的缓冲. 可是使用这一公式, 任何中间的缓冲需要由数值范围决定, 此数值范围表示在要么 x 要么 y上偏移的最大范围.     This filter can have arbitrary non-localized effect on the input which mightrequire substantial buffering in the processing pipeline. However with thisformulation, any intermediate buffering needs can be determined by scalewhich represents the maximum range of displacement in either x or y.

当使用这一滤镜, 源像素位置将常常位于几个源像素之间. 在这种情况下推荐 高质量阅读器 使用适当的插补技术, 例如双线性或双三次插值,而不是简单地选择最近的源像素. 依赖于可用的插补的速度 , 这一选择可能受到'image-rendering'属性设置的影响.         When applying this filter,the source pixel location will often lie between several source pixels. In thiscase it is recommended thathighquality viewers apply an interpolent on the surrounding pixels, for examplebilinear or bicubic, rather than simply selecting the nearest source pixel.Depending on the speed of the available interpolents, this choice may beaffected by the'image-rendering' property setting.

  'color-interpolation-filters' 属性只用于 in2 源图像而不用于in 源图像.        The'color-interpolation-filters' property only appliesto the in2 source image and does not apply to the in source image.

 
<!ELEMENT feDisplacementMap (animate|set)* >
<!ATTLIST feDisplacementMap
  %stdAttrs;
  %PresentationAttributes-FilterPrimitives;
  %filter_primitive_attributes_with_in;
  in2 CDATA #REQUIRED
  scale %Number; #IMPLIED
  xChannelSelector (R | G | B | A) "A"
  yChannelSelector (R | G | B | A) "A" >

性质定义:    Attributedefinitions:

scale = "<number>"

偏移比例因子. 其数量按照由 在 'filter' 元素上的性质primitiveUnits 所建立的坐标系来表示.      Displacement scale factor. The amountis expressed in the coordinate system established by attribute primitiveUnits on the 'filter' element.
当此性质的值为 0 时, 这一操作在源图像上无效果.      When the value of this attribute is 0, this operation has no effect on the source image.
如果不提供此性质, 那么效果相当于指定此性质的值为  0 .     If the attribute isnot specified, then the effect is as if a value of 0were specified.
Animatable:yes.

xChannelSelector ="R | G | B | A"

表示使用in2 中的哪个通道沿着x轴偏移在in 中的像素.       Indicates which channel from in2 to use to displace the pixels in in along the x-axis.
Animatable:yes.

yChannelSelector ="R | G | B | A"

表示使用in2 中的哪个通道沿着 y轴偏移在in 中的像素.       Indicates which channel from in2 to use to displace the pixels in in along the y-axis.
Animatable:yes.

in2 = "(see in attribute)"

第二个输入图像, 它用来对性质in的图像的像素进行偏移. 这一性质可以和in 性质具有相同的值.      The second input image, which is usedto displace the pixels in the image from attributein. This attribute can take on the same values asthe in attribute.
Animatable:yes.

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

%stdAttrs;,%filter_primitive_attributes_with_in;,%PresentationAttributes-FilterPrimitives;.

15.16 基本滤镜'feFlood' Filter primitive 'feFlood'

此基本滤镜创建一个用属性'flood-color' 和'flood-opacity'所指定的颜色和不透明值来填充的一个矩形. 此矩形与由在元素'feFlood'上的性质x,y, width 和 height 所建立的基本滤镜子区域一样大.        This filter primitive creates a rectangle filled with the color and opacityvalues from properties 'flood-color' and 'flood-opacity'. The rectangle is as large as the filterprimitive subregion established by the x, y, width and height attributes on the 'feFlood'element. 

 
<!ELEMENT feFlood (animate|set|animateColor)* >
<!ATTLIST feFlood
  %stdAttrs;
  class %ClassList; #IMPLIED
  style %StyleSheet; #IMPLIED
  %PresentationAttributes-Color;
  %PresentationAttributes-feFlood;
  %PresentationAttributes-FilterPrimitives;
  %filter_primitive_attributes_with_in; >

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

%stdAttrs;,%filter_primitive_attributes_with_in;,class,style, %PresentationAttributes-Color;,%PresentationAttributes-feFlood;,%PresentationAttributes-FilterPrimitives;.

'flood-color' 属性表示用什么颜色来覆盖当前 基本滤镜子区域. 关键词 currentColor 和 ICC 颜色可以按在一个<paint>规定中'fill'和'stroke'属性的相同方式来指定.     The 'flood-color'property indicates what color to use to flood the current filterprimitive subregion. The keyword currentColorand ICC colors can be specified in the same manner as within a<paint>specification for the 'fill' and 'stroke' properties.

'flood-color'

Value:  

currentColor |
<color> [icc-color(<name>[,<icccolorvalue>]*)] |
inherit

Initial:  

black

Applies to:  

'feFlood' elements

Inherited:  

no

Percentages:  

N/A

Media:  

visual

Animatable:  

yes

'flood-opacity' 属性定义用于整个基本滤镜子区域的不透明值.        The 'flood-opacity' property defines the opacityvalue to use across the entirefilterprimitive subregion.

'flood-opacity'

Value:  

<alphavalue> | inherit

Initial:  

1

Applies to:  

'feFlood' elements

Inherited:  

no

Percentages:  

N/A

Media:  

visual

Animatable:  

yes

15.17 基本滤镜'feGaussianBlur'    Filter primitive 'feGaussianBlur'

这一基本滤镜在输入图像上执行一个高斯模糊.    This filter primitive performs a Gaussian blur on the input image.

高斯模糊核为标准化卷积的一种近似:    The Gaussian blur kernel is an approximation of the normalized convolution:

H(x) = exp(-x2/ (2s2))/ sqrt(2* pi*s2)

这里 's' 为由 stdDeviation所指定的标准偏差.     where 's' is the standard deviationspecified by stdDeviation.

stdDeviation 的值可以为一个数值也可以为两个数值. 如果提供两个数值, 那么第一个数值表示沿着当前坐标系的x轴的标准偏差而第二个数值表示沿着当前坐标系的y轴的标准偏差.如果只提供一个数值, 那么这个值用于表示沿着两个方向X 和 Y 的标准偏差,即两个方向的标准偏差都为这个值.    The value of stdDeviation can be either one or two numbers. Iftwo numbers are provided, the first number represents a standard deviationvalue along the x-axis of the current coordinate system and the second valuerepresents a standard deviation in Y. If one number is provided, then thatvalue is used for both X and Y.

即使只为stdDeviation提供一个值 , 这时一样能够作为一个可分的卷积来实现.   Even if only one value is provided forstdDeviation, this can be implemented as a separableconvolution.

对于较大的's' 的值(s >= 2.0), 可以使用一种近似: 三个连续的盒式模糊建立一个分段平方的卷积内核, 它与高斯核大约有3%的误差.   For largervalues of 's' (s >= 2.0), an approximation can be used: Three successivebox-blurs build a piece-wise quadratic convolution kernel, which approximatesthe Gaussian kernel to within roughly 3%.

让d= floor(s * 3*sqrt(2*pi)/4 + 0.5)   let d = floor(s * 3*sqrt(2*pi)/4+ 0.5)

... 若d是奇数, 在输出像素的中心使用三个尺寸为'd'的盒式模糊.   ... if d isodd, use three box-blurs of size 'd', centered on the output pixel.

... 若d是偶数,使用两个尺寸为'd'的盒式模糊 (the first one centered onthe pixel boundary between the output pixel and the one to the left, the secondone centered on the pixel boundary between the output pixel and the one to theright) 并且 在输出像素的中心使用一个尺寸为'd+1'的盒式模糊.      ... if d iseven, two box-blurs of size 'd' (the first one centered on the pixel boundarybetween the output pixel and the one to the left, the second one centered onthe pixel boundary between the output pixel and the one to the right) and onebox blur of size 'd+1' centered on the output pixel.

常常这种操作将发生在只有alpha通道的图像, 比如由内建的输入SourceAlpha所产生. 实现者应该注意并优化这种单通道的情况. 如果输入如果输入有无限的范围并且为一常数,这一操作无效.如果输入有无限的范围并且为一种平铺, 此滤镜根据周期的边界条件来求值.   Frequently this operation will take place on alpha-only images, such as thatproduced by the built-in input,SourceAlpha. The implementation may notice this andoptimize the single channel case. If the input has infinite extent and isconstant, this operation has no effect. If the input has infinite extent and isa tile, the filter is evaluated with periodic boundary conditions.

 
<!ELEMENT feGaussianBlur (animate|set)* >
<!ATTLIST feGaussianBlur
  %stdAttrs;
  %PresentationAttributes-FilterPrimitives;
  %filter_primitive_attributes_with_in;
  stdDeviation %NumberOptionalNumber; #IMPLIED >

性质定义:    Attributedefinitions:

stdDeviation ="<number-optional-number>"

这一模糊操作的标准偏差. 如果提供两个数值<number>,那么第一个数值表示沿着由在此'filter'元素的性质primitiveUnits所确定的当前坐标系的x轴的标准偏差.而第二个数值表示沿着当前坐标系的y轴的标准偏差. 如果只提供一个数值, 那么这个值用于表示沿着两个方向X 和 Y 的标准偏差.    The standard deviation for the blur operation. If two<number>sare provided, the first number represents a standard deviation value along thex-axis of the coordinate system established by attributeprimitiveUnits on the 'filter' element. The second value represents astandard deviation in Y. If one number is provided, then that value is used forboth X and Y.
负值为一种错误 (参见 错误处理). 值为零则使此基本滤镜失去作用(即, 其结果为一透明的黑色图像).     Anegative value is an error (see Errorprocessing). A value of zero disables the effect of the given filterprimitive (i.e., the result is a transparent black image).
如果不提供此性质, 那么效果相当于指定此性质的值为  0 .    If the attribute is notspecified, then the effect is as if a value of 0were specified.
Animatable:yes.

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

%stdAttrs;,%filter_primitive_attributes_with_in;,%PresentationAttributes-FilterPrimitives;.

本章开始处的那个例子便是使用高斯模糊基本滤镜所创建的阴影效果.    The example atthe start of this chapter makes use of the feGaussianBlurfilter primitive to create a drop shadow effect.

15.18 基本滤镜 'feImage'   Filter primitive 'feImage'

这一基本滤镜引用一个外部图形到这一滤镜元素, 它被加载或渲染到一个RGBA 光栅图像并且成为此基本滤镜的结果.       This filter primitive refers to a graphic external to this filter element,which is loaded or rendered into an RGBA raster and becomes the result of thefilter primitive.

这一基本滤镜引用一个外部图像或者另一片精图. 所产生的图像除了此图形来自外部外类似于内建的图像源 SourceGraphic .     This filterprimitive can refer to an external image or can be a reference to another pieceof SVG. It produces an image similar to the built-in image sourceSourceGraphic except that the graphic comes from anexternal source.

如果 xlink:href 引用一个单独的图像资源比如一个 JPEG, PNG 或 SVG 文件, 那么此图像资源按照 'image' 元素的行为进行渲染; 否则, 所引用的资源按照 'use'元素的行为进行渲染. 在每种情况下,当前用户坐标系依赖于元素'filter'上的性质primitiveUnits的值.     If the xlink:hrefreferences a stand-alone image resource such as a JPEG, PNG or SVG file, thenthe image resource is rendered according to the behavior of the'image' element; otherwise, the referencedresource is rendered according to the behavior of the'use' element. In either case, the current usercoordinate system depends on the value of attributeprimitiveUnits on the 'filter' element.

当引用的图像必须重采样以便与设备坐标系相匹配时,推荐 高质量阅读器 使用适当的插补技术, 例如双线性或双三次插值. 依赖于可用的插补的速度 , 这一选择可能受到'image-rendering'属性设置的影响.       Whenthe referenced image must be resampled to match the device coordinate system,it is recommended that highquality viewers make use of appropriate interpolation techniques, forexample bilinear or bicubic. Depending on the speed of the availableinterpolents, this choice may be affected by the'image-rendering' property setting. 

 
<!ELEMENT feImage (animate|set|animateTransform)* >
<!ATTLIST feImage
  %stdAttrs;
  %xlinkRefAttrsEmbed;
  xlink:href %URI; #REQUIRED
  %langSpaceAttrs;
  externalResourcesRequired %Boolean; #IMPLIED
  class %ClassList; #IMPLIED
  style %StyleSheet; #IMPLIED
  %PresentationAttributes-All; >

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

%stdAttrs;,%xlinkRefAttrsEmbed;,xlink:href,%langSpaceAttrs;,externalResourcesRequired,class,style, %PresentationAttributes-All;,%filter_primitive_attributes;.

15.19 基本滤镜 Filter primitive 'feMerge'

This filter primitive composites input image layers on topof each other using theover operator with Input1 (correspondingto the first 'feMergeNode' child element) on the bottom andthe last specified input, InputN (corresponding to the last'feMergeNode' child element), on top.

Many effects produce a number of intermediate layers inorder to create the final output image. This filter allows us to collapse thoseinto a single image. Although this could be done by using n-1Composite-filters, it is more convenient to have this common operationavailable in this form, and offers the implementation some additionalflexibility.

Each 'feMerge' element can have any number of 'feMergeNode'subelements, each of which has anin attribute.

The canonical implementation of feMerge is to render theentire effect into one RGBA layer, and then render the resulting layer on theoutput device. In certain cases (in particular if the output device itself is acontinuous tone device), and since merging is associative, it might be asufficient approximation to evaluate the effect one layer at a time and rendereach layer individually onto the output device bottom to top.

If the topmost image input is SourceGraphic and this 'feMerge'is the last filter primitive in the filter, the implementation is encouraged torender the layers up to that point, and then render theSourceGraphic directly from its vector descriptionon top. 

 
<!ELEMENT feMerge (feMergeNode)* >
<!ATTLIST feMerge
  %stdAttrs;
  %PresentationAttributes-FilterPrimitives;
  %filter_primitive_attributes; >
 
<!ELEMENT feMergeNode (animate|set)* >
<!ATTLIST feMergeNode
  %stdAttrs;
  in CDATA #IMPLIED >

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

%stdAttrs;,%filter_primitive_attributes;,in,%PresentationAttributes-FilterPrimitives;.

本章开始处的那个例子便是使用feMerge这一基本滤镜将两个中间的滤镜结果合并在一起的.   Theexampleat the start of this chapter makes use of the feMerge filter primitive to composite twointermediate filter results together.

15.20基本滤镜 Filterprimitive 'feMorphology'

This filter primitive performs "fattening" or"thinning" of artwork. It is particularly useful for fattening orthinning an alpha channel.

The dilation (or erosion) kernel is a rectangle with awidth of 2*x-radius and a height of 2*y-radius. In dilation,the output pixel is the individual component-wise maximum of the correspondingR,G,B,A values in the input image's kernel rectangle. In erosion, the outputpixel is the individual component-wise minimum of the corresponding R,G,B,Avalues in the input image's kernel rectangle.

Frequently this operation will take place on alpha-onlyimages, such as that produced by the built-in input,SourceAlpha. In that case, the implementation mightwant to optimize the single channel case.

If the input has infinite extent and is constant, thisoperation has no effect. If the input has infinite extent and is a tile, thefilter is evaluated with periodic boundary conditions.

Because 'feMorphology'operates on premultipied color values, it will always result in color valuesless than or equal to the alpha channel.

 
<!ELEMENT feMorphology (animate|set)* >
<!ATTLIST feMorphology
  %stdAttrs;
  %PresentationAttributes-FilterPrimitives;
  %filter_primitive_attributes_with_in;
  operator (erode | dilate) "erode"
  radius %NumberOptionalNumber; #IMPLIED >

性质定义:    Attributedefinitions:

operator = "erode | dilate"

A keywordindicating whether to erode (i.e., thin) or dilate (fatten) the source graphic.
Animatable:yes.

radius = "<number-optional-number>"

The radius (orradii) for the operation. If two <number>sare provided, the first number represents a x-radius and the second valuerepresents a y-radius. If one number is provided, then that value is used forboth X and Y. The values are in the coordinate system established by attributeprimitiveUnits on the 'filter' element.
A negative value is an error (see Errorprocessing). A value of zero disables the effect of the given filterprimitive (i.e., the result is a transparent black image).
If the attribute is not specified, then the effect is as if a value of 0 were specified.
Animatable:yes.

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

%stdAttrs;,%filter_primitive_attributes_with_in;,%PresentationAttributes-FilterPrimitives;.

Example feMorphology shows examples of the four types of feMorphology operations.

 
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
          "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="5cm" height="7cm" viewBox="0 0 700 500"
     xmlns="http://www.w3.org/2000/svg">
  <title>Example feMorphology - Examples of erode and dilate</title>
  <desc>Five text strings drawn as outlines.
        The first is unfiltered. The second and third use 'erode'.
        The fourth and fifth use 'dilate'.</desc>
  <defs>
    <filter id="Erode3">
      <feMorphology operator="erode" in="SourceGraphic" radius="3" />
    </filter>
    <filter id="Erode6">
      <feMorphology operator="erode" in="SourceGraphic" radius="6" />
    </filter>
    <filter id="Dilate3">
      <feMorphology operator="dilate" in="SourceGraphic" radius="3" />
    </filter>
    <filter id="Dilate6">
      <feMorphology operator="dilate" in="SourceGraphic" radius="6" />
    </filter>
  </defs>
  <rect fill="none" stroke="blue" stroke-width="2"  
        x="1" y="1" width="698" height="498"/>
  <g enable-background="new" >
    <g font-family="Verdana" font-size="75" 
              fill="none" stroke="black" stroke-width="6" >
      <text x="50" y="90">Unfiltered</text>
      <text x="50" y="180" filter="url(#Erode3)" >Erode radius 3</text>
      <text x="50" y="270" filter="url(#Erode6)" >Erode radius 6</text>
      <text x="50" y="360" filter="url(#Dilate3)" >Dilate radius 3</text>
      <text x="50" y="450" filter="url(#Dilate6)" >Dilate radius 6</text>
    </g>
  </g>
</svg>

Example feMorphology

View thisexample as SVG (SVG-enabled browsers only)
 

15.21 基本滤镜 Filter primitive 'feOffset'

This filter primitive offsets the input image relative toits current position in the image space by the specified vector.

This is important for effects like drop shadows.

When applying this filter, the destination location may beoffset by a fraction of a pixel in device space. In this case ahighquality viewer should make use of appropriate interpolation techniques, forexample bilinear or bicubic. This is especially recommended for dynamic viewerswhere this interpolation provides visually smoother movement of images. Forstatic viewers this is less of a concern. Close attention should be made to the'image-rendering' property setting to determine theauthors intent.

 
<!ELEMENT feOffset (animate|set)* >
<!ATTLIST feOffset
  %stdAttrs;
  %PresentationAttributes-FilterPrimitives;
  %filter_primitive_attributes_with_in;
  dx %Number; #IMPLIED
  dy %Number; #IMPLIED >

性质定义:    Attributedefinitions:

dx = "<number>"

The amount tooffset the input graphic along the x-axis. The offset amount is expressed inthe coordinate system established by attributeprimitiveUnits on the 'filter' element.
If the attribute is not specified, then the effect is as if a value of 0 were specified.
Animatable:yes.

dy = "<number>"

The amount tooffset the input graphic along the y-axis. The offset amount is expressed inthe coordinate system established by attributeprimitiveUnits on the 'filter' element.
If the attribute is not specified, then the effect is as if a value of 0 were specified.
Animatable:yes.

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

%stdAttrs;,%filter_primitive_attributes_with_in;,%PresentationAttributes-FilterPrimitives;.

Theexampleat the start of this chapter makes use of the feOffset filter primitive to offset the drop shadowfrom the original source graphic.

15.22 基本滤镜 Filter primitive 'feSpecularLighting'

This filter primitive lights a source graphic using thealpha channel as a bump map. The resulting image is an RGBA image based on thelight color. The lighting calculation follows the standard specular componentof the Phong lighting model. The resulting image depends on the light color,light position and surface geometry of the input bump map. The result of thelighting calculation is added. The filter primitive assumes that the viewer isat infinity in the z direction (i.e., the unit vector in the eye direction is(0,0,1) everywhere).

This filter primitive produces an image which contains thespecular reflection part of the lighting calculation. Such a map is intended tobe combined with a texture using theadd term of the arithmetic'feComposite'method. Multiple light sources can be simulated by adding several of theselight maps before applying it to the texture image.

The resulting RGBA image is computed as follows:

Sr = ks *pow(N.H, specularExponent) * Lr
Sg = ks * pow(N.H, specularExponent) * Lg
Sb = ks * pow(N.H, specularExponent) * Lb
Sa = max(Sr, Sg, Sb)

where

ks =specular lighting constant
N = surface normal unit vector, a function of x and y
H = "halfway" unit vector between eye unit vector and light unitvector

Lr,Lg,Lb = RGB components of light

See 'feDiffuseLighting'for definition of N and (Lr, Lg, Lb).

The definition of H reflects our assumption of the constanteye vector E = (0,0,1):

H = (L + E) / Norm(L+E)

where L is the light unit vector.

Unlike the 'feDiffuseLighting', the 'feSpecularLighting' filter produces a non-opaqueimage. This is due to the fact that the specular result (Sr,Sg,Sb,Sa)is meant to be added to the textured image. The alpha channel of the result isthe max of the color components, so that where the specular light is zero, noadditional coverage is added to the image and a fully white highlight will addopacity.

The 'feDiffuseLighting'and 'feSpecularLighting' filters will often beapplied together. An implementation may detect this and calculate both maps inone pass, instead of two.

 
<!ELEMENT feSpecularLighting ((feDistantLight|fePointLight|feSpotLight),(animate|set|animateColor)*) >
<!ATTLIST feSpecularLighting
  %stdAttrs;
  class %ClassList; #IMPLIED
  style %StyleSheet; #IMPLIED
  %PresentationAttributes-Color;
  %PresentationAttributes-FilterPrimitives;
  %PresentationAttributes-LightingEffects;
  %filter_primitive_attributes_with_in;
  surfaceScale %Number; #IMPLIED
  specularConstant %Number; #IMPLIED
  specularExponent %Number; #IMPLIED 
  kernelUnitLength %NumberOptionalNumber; #IMPLIED >

性质定义:    Attributedefinitions:

surfaceScale ="<number>"

height ofsurface when Ain = 1.
If the attribute is not specified, then the effect is as if a value of 1 were specified.
Animatable:yes.

specularConstant ="<number>"

ks in Phonglighting model. In SVG, this can be any non-negative number.
If the attribute is not specified, then the effect is as if a value of 1 were specified.
Animatable:yes.

specularExponent ="<number>"

Exponent forspecular term, larger is more "shiny". Range 1.0 to 128.0.
If the attribute is not specified, then the effect is as if a value of 1 were specified.
Animatable:yes.

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

%stdAttrs;,%filter_primitive_attributes_with_in;,kernelUnitLength,%PresentationAttributes-Color;,%PresentationAttributes-FilterPrimitives;,%PresentationAttributes-LightingEffects;.

The light source is defined by one of the child elements 'feDistantLight', 'fePointLight' or 'feDistantLight'. The light color is specified byproperty 'lighting-color'.

Theexampleat the start of this chapter makes use of the feSpecularLighting filter primitive to achieve ahighly reflective, 3D glowing effect.

15.23 基本滤镜'feTile'   Filter primitive 'feTile'

This filter primitive fills a target rectangle with arepeated, tiled pattern of an input image. The target rectangle is as large asthefilterprimitive subregion established by the x, y, width and height attributes on the 'feTile'element.

Typically, the input image has been defined with its own filterprimitive subregion in order to define a reference tile. 'feTile' replicates the reference tile in both X andY to completely fill the target rectangle. The top/left corner of each giventile is at location(x+i*width,y+j*height), where (x,y) represents the top/left of the input image's filter primitivesubregion,width and height represent the width and height of the input image's filterprimitive subregion, andi and j can be any integer value. In most cases, the input image will havea smaller filter primitive subregion than the 'feTile'in order to achieve a repeated pattern effect.

Implementers must take appropriate measures in constructingthe tiled image to avoid artifacts between tiles, particularly in situationswhere the user to device transform includes shear and/or rotation. Unless careis taken, interpolation can lead to edge pixels in the tile having opacityvalues lower or higher than expected due to the interaction of paintingadjacent tiles which each have partial overlap with particular pixels.

 
<!ELEMENT feTile (animate|set)* >
<!ATTLIST feTile
  %stdAttrs;
  %PresentationAttributes-FilterPrimitives;
  %filter_primitive_attributes_with_in; >

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

%stdAttrs;,%filter_primitive_attributes_with_in;,%PresentationAttributes-FilterPrimitives;.

15.24基本滤镜'feTurbulence'   Filterprimitive 'feTurbulence'

This filter primitive creates an image using the Perlinturbulence function. It allows the synthesis of artificial textures like cloudsor marble. For a detailed description the of the Perlin turbulence function,see "Texturing and Modeling", Ebert et al, AP Professional, 1994. Theresulting image will fill the entire filterprimitive subregion for this filter primitive.

It is possible to create bandwidth-limited noise bysynthesizing only one octave.

The C code below shows the exact algorithm used for thisfilter effect.

For fractalSum, you get a turbFunctionResult that is aimedat a range of -1 to 1 (the actual result might exceed this range in somecases). To convert to a color value, use the formulacolorValue = ((turbFunctionResult * 255) +255) / 2, then clamp to the range 0 to 255.

For turbulence, you get a turbFunctionResult that is aimedat a range of 0 to 1 (the actual result might exceed this range in some cases).To convert to a color value, use the formulacolorValue = (turbFunctionResult * 255), then clamp to the range 0 to 255.

The following order is used for applying the pseudo randomnumbers. An initial seed value is computed based on attribute seed. Then the implementation computes the latticepoints for R, then continues getting additional pseudo random numbers relativeto the last generated pseudo random number and computes the lattice points forG, and so on for B and A.

The generated color and alpha values are in the color spacedetermined by the value of property'color-interpolation-filters': 

 
/* Produces results in the range [1, 2**31 - 2].
Algorithm is: r = (a * r) mod m
where a = 16807 and m = 2**31 - 1 = 2147483647
See [Park & Miller], CACM vol. 31 no. 10 p. 1195, Oct. 1988
To test: the algorithm should produce the result 1043618065
as the 10,000th generated number if the original seed is 1.
*/
#define RAND_m 2147483647 /* 2**31 - 1 */
#define RAND_a 16807 /* 7**5; primitive root of m */
#define RAND_q 127773 /* m / a */
#define RAND_r 2836 /* m % a */
 
long setup_seed(long lSeed)
{
  if (lSeed <= 0) lSeed = -(lSeed % (RAND_m - 1)) + 1;
  if (lSeed > RAND_m - 1) lSeed = RAND_m - 1;
  return lSeed;
}
 
long random(long lSeed)
{
  long result;
  result = RAND_a * (lSeed % RAND_q) - RAND_r * (lSeed / RAND_q);
  if (result <= 0) result += RAND_m;
  return result;
}
 
#define BSize 0x100
#define BM 0xff
#define PerlinN 0x1000
#define NP 12 /* 2^PerlinN */
#define NM 0xfff
static uLatticeSelector[BSize + BSize + 2];
static double fGradient[4][BSize + BSize + 2][2];
struct StitchInfo
{
  int nWidth; // How much to subtract to wrap for stitching.
  int nHeight;
  int nWrapX; // Minimum value to wrap.
  int nWrapY;
};
 
static void init(long lSeed)
{
  double s;
  int i, j, k;
  lSeed = setup_seed(lSeed);
  for(k = 0; k < 4; k++)
  {
    for(i = 0; i < BSize; i++)
    {
      uLatticeSelector[i] = i;
      for (j = 0; j < 2; j++)
        fGradient[k][i][j] = (double)(((lSeed = random(lSeed)) % (BSize + BSize)) - BSize) / BSize;
      s = double(sqrt(fGradient[k][i][0] * fGradient[k][i][0] + fGradient[k][i][1] * fGradient[k][i][1]));
      fGradient[k][i][0] /= s;
      fGradient[k][i][1] /= s;
    }
  }
  while(--i)
  {
    k = uLatticeSelector[i];
    uLatticeSelector[i] = uLatticeSelector[j = (lSeed = random(lSeed)) % BSize];
    uLatticeSelector[j] = k;
  }
  for(i = 0; i < BSize + 2; i++)
  {
    uLatticeSelector[BSize + i] = uLatticeSelector[i];
    for(k = 0; k < 4; k++)
      for(j = 0; j < 2; j++)
        fGradient[k][BSize + i][j] = fGradient[k][i][j];
  }
}
 
#define s_curve(t) ( t * t * (3. - 2. * t) )
#define lerp(t, a, b) ( a + t * (b - a) )
double noise2(int nColorChannel, double vec[2], StitchInfo *pStitchInfo)
{
  int bx0, bx1, by0, by1, b00, b10, b01, b11;
  double rx0, rx1, ry0, ry1, *q, sx, sy, a, b, t, u, v;
  register i, j;
  t = vec[0] + PerlinN;
  bx0 = (int)t;
  bx1 = bx0+1;
  rx0 = t - (int)t;
  rx1 = rx0 - 1.0f;
  t = vec[1] + PerlinN;
  by0 = (int)t;
  by1 = by0+1;
  ry0 = t - (int)t;
  ry1 = ry0 - 1.0f;
 
  // If stitching, adjust lattice points accordingly.
  if(pStitchInfo != NULL)
  {
    if(bx0 >= pStitchInfo->nWrapX)
      bx0 -= pStitchInfo->nWidth;
    if(bx1 >= pStitchInfo->nWrapX)
      bx1 -= pStitchInfo->nWidth;
    if(by0 >= pStitchInfo->nWrapY)
      by0 -= pStitchInfo->nHeight;
    if(by1 >= pStitchInfo->nWrapY)
      by1 -= pStitchInfo->nHeight;
  }
 
  bx0 &= BM;
  bx1 &= BM;
  by0 &= BM;
  by1 &= BM;
 
  i = uLatticeSelector[bx0];
  j = uLatticeSelector[bx1];
  b00 = uLatticeSelector[i + by0];
  b10 = uLatticeSelector[j + by0];
  b01 = uLatticeSelector[i + by1];
  b11 = uLatticeSelector[j + by1];
  sx = double(s_curve(rx0));
  sy = double(s_curve(ry0));
  q = fGradient[nColorChannel][b00]; u = rx0 * q[0] + ry0 * q[1];
  q = fGradient[nColorChannel][b10]; v = rx1 * q[0] + ry0 * q[1];
  a = lerp(sx, u, v);
  q = fGradient[nColorChannel][b01]; u = rx0 * q[0] + ry1 * q[1];
  q = fGradient[nColorChannel][b11]; v = rx1 * q[0] + ry1 * q[1];
  b = lerp(sx, u, v);
  return lerp(sy, a, b);
}
 
double turbulence(int nColorChannel, double *point, double fBaseFreqX, double fBaseFreqY,
          int nNumOctaves, bool bFractalSum, bool bDoStitching,
          double fTileX, double fTileY, double fTileWidth, double fTileHeight)
{
  StitchInfo stitch;
  StitchInfo *pStitchInfo = NULL; // Not stitching when NULL.
 
  // Adjust the base frequencies if necessary for stitching.
  if(bDoStitching)
  {
    // When stitching tiled turbulence, the frequencies must be adjusted
    // so that the tile borders will be continuous.
    if(fBaseFreqX != 0.0)
    {
      double fLoFreq = double(floor(fTileWidth * fBaseFreqX)) / fTileWidth;
      double fHiFreq = double(ceil(fTileWidth * fBaseFreqX)) / fTileWidth;
      if(fBaseFreqX / fLoFreq < fHiFreq / fBaseFreqX)
        fBaseFreqX = fLoFreq;
      else
        fBaseFreqX = fHiFreq;
    }
 
    if(fBaseFreqY != 0.0)
    {
      double fLoFreq = double(floor(fTileHeight * fBaseFreqY)) / fTileHeight;
      double fHiFreq = double(ceil(fTileHeight * fBaseFreqY)) / fTileHeight;
      if(fBaseFreqY / fLoFreq < fHiFreq / fBaseFreqY)
        fBaseFreqY = fLoFreq;
      else
        fBaseFreqY = fHiFreq;
    }
 
    // Set up initial stitch values.
    pStitchInfo = &stitch;
    stitch.nWidth = int(fTileWidth * fBaseFreqX + 0.5f);
    stitch.nWrapX = fTileX * fBaseFreqX + PerlinN + stitch.nWidth;
    stitch.nHeight = int(fTileHeight * fBaseFreqY + 0.5f);
    stitch.nWrapY = fTileY * fBaseFreqY + PerlinN + stitch.nHeight;
  }
 
  double fSum = 0.0f;
  double vec[2];
  vec[0] = point[0] * fBaseFreqX;
  vec[1] = point[1] * fBaseFreqY;
  double ratio = 1;
  for(int nOctave = 0; nOctave < nNumOctaves; nOctave++)
  {
    if(bFractalSum)
      fSum += double(noise2(nColorChannel, vec, pStitchInfo) / ratio);
    else
      fSum += double(fabs(noise2(nColorChannel, vec, pStitchInfo)) / ratio);
 
    vec[0] *= 2;
    vec[1] *= 2;
    ratio *= 2;
 
    if(pStitchInfo != NULL)
    {
      // Update stitch values. Subtracting PerlinN before the multiplication and
      // adding it afterward simplifies to subtracting it once.
      stitch.nWidth *= 2;
      stitch.nWrapX = 2 * stitch.nWrapX - PerlinN;
      stitch.nHeight *= 2;
      stitch.nWrapY = 2 * stitch.nWrapY - PerlinN;
    }
  }
  return fSum;
}
 
<!ELEMENT feTurbulence (animate|set)* >
<!ATTLIST feTurbulence
  %stdAttrs;
  %PresentationAttributes-FilterPrimitives;
  %filter_primitive_attributes;
  baseFrequency %NumberOptionalNumber; #IMPLIED
  numOctaves %Integer; #IMPLIED
  seed %Number; #IMPLIED
  stitchTiles (stitch | noStitch) "noStitch"
  type (fractalNoise | turbulence) "turbulence" >

性质定义:    Attributedefinitions:

baseFrequency ="<number-optional-number>"

The basefrequency (frequencies) parameter(s) for the noise function. If two <number>sare provided, the first number represents a base frequency in the X directionand the second value represents a base frequency in the Y direction. If onenumber is provided, then that value is used for both X and Y.
A negative value for base frequency is an error (see Errorprocessing).
If the attribute is not specified, then the effect is as if a value of 0 were specified.
Animatable:yes.

numOctaves = "<integer>"

The numOctavesparameter for the noise function.
If the attribute is not specified, then the effect is as if a value of 1 were specified.
Animatable:yes.

seed = "<number>"

The startingnumber for the pseudo random number generator.
If the attribute is not specified, then the effect is as if a value of 0 were specified.
Animatable:yes.

stitchTiles = "stitch| noStitch"

If stitchTiles="noStitch", no attempt it made toachieve smooth transitions at the border of tiles which contain a turbulencefunction. Sometimes the result will show clear discontinuities at the tileborders.
If stitchTiles="stitch", then the useragent will automatically adjust baseFrequency-x and baseFrequency-y values suchthat the feTurbulence node's width and height (i.e., the width and height ofthe current subregion) contains an integral number of the Perlin tile width andheight for the first octave. The baseFrequency will be adjusted up or downdepending on which way has the smallest relative (not absolute) change asfollows: Given the frequency, calculatelowFreq=floor(width*frequency)/width and hiFreq=ceil(width*frequency)/width. If frequency/lowFreq < hiFreq/frequency then use lowFreq, elseuse hiFreq. While generating turbulence values, generate lattice vectors asnormal for Perlin Noise, except for those lattice points that lie on the rightor bottom edges of the active area (the size of the resulting tile). In thosecases, copy the lattice vector from the opposite edge of the active area.
Animatable:yes.

type = "fractalNoise |turbulence"

表示此基本滤镜将要执行一个噪声或紊乱函数。   Indicates whether the filter primitive should perform anoise or turbulence function.
Animatable:yes.

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

%stdAttrs;,%filter_primitive_attributes;,%PresentationAttributes-FilterPrimitives;.

例子 feTurbulence 显示关于对feTurbulence的各种参数进行设置的效果 .  Example feTurbulence shows the effects of variousparameter settings for feTurbulence.

 
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
          "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="450px" height="325px" viewBox="0 0 450 325"
     xmlns="http://www.w3.org/2000/svg">
  <title>Example feTurbulence - Examples of feTurbulence operations</title>
  <desc>Six rectangular areas showing the effects of 
        various parameter settings for feTurbulence.</desc>
  <g  font-family="Verdana" text-anchor="middle" font-size="10" >
    <defs>
      <filter id="Turb1" filterUnits="objectBoundingBox" 
              x="0%" y="0%" width="100%" height="100%">
        <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2"/>
      </filter>
      <filter id="Turb2" filterUnits="objectBoundingBox" 
              x="0%" y="0%" width="100%" height="100%">
        <feTurbulence type="turbulence" baseFrequency="0.1" numOctaves="2"/>
      </filter>
      <filter id="Turb3" filterUnits="objectBoundingBox" 
              x="0%" y="0%" width="100%" height="100%">
        <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="8"/>
      </filter>
      <filter id="Turb4" filterUnits="objectBoundingBox" 
              x="0%" y="0%" width="100%" height="100%">
        <feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="4"/>
      </filter>
      <filter id="Turb5" filterUnits="objectBoundingBox" 
              x="0%" y="0%" width="100%" height="100%">
        <feTurbulence type="fractalNoise" baseFrequency="0.4" numOctaves="4"/>
      </filter>
      <filter id="Turb6" filterUnits="objectBoundingBox" 
              x="0%" y="0%" width="100%" height="100%">
        <feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="1"/>
      </filter>
    </defs>
 
    <rect x="1" y="1" width="448" height="323"
          fill="none" stroke="blue" stroke-width="1"  />
 
    <rect x="25" y="25" width="100" height="75" filter="url(#Turb1)"  />
    <text x="75" y="117">type=turbulence</text>
    <text x="75" y="129">baseFrequency=0.05</text>
    <text x="75" y="141">numOctaves=2</text>
 
    <rect x="175" y="25" width="100" height="75" filter="url(#Turb2)"  />
    <text x="225" y="117">type=turbulence</text>
    <text x="225" y="129">baseFrequency=0.1</text>
    <text x="225" y="141">numOctaves=2</text>
 
    <rect x="325" y="25" width="100" height="75" filter="url(#Turb3)"  />
    <text x="375" y="117">type=turbulence</text>
    <text x="375" y="129">baseFrequency=0.05</text>
    <text x="375" y="141">numOctaves=8</text>
 
    <rect x="25" y="180" width="100" height="75" filter="url(#Turb4)"  />
    <text x="75" y="272">type=fractalNoise</text>
    <text x="75" y="284">baseFrequency=0.1</text>
    <text x="75" y="296">numOctaves=4</text>
 
    <rect x="175" y="180" width="100" height="75" filter="url(#Turb5)"  />
    <text x="225" y="272">type=fractalNoise</text>
    <text x="225" y="284">baseFrequency=0.4</text>
    <text x="225" y="296">numOctaves=4</text>
 
    <rect x="325" y="180" width="100" height="75" filter="url(#Turb6)"  />
    <text x="375" y="272">type=fractalNoise</text>
    <text x="375" y="284">baseFrequency=0.1</text>
    <text x="375" y="296">numOctaves=1</text>
  </g>
</svg>

Example feTurbulence

View thisexample as SVG (SVG-enabled browsers only)
 

 

 

15.25 DOM interfaces

The following interfaces are defined below: SVGFilterElement, SVGFilterPrimitiveStandardAttributes,SVGFEBlendElement,SVGFEColorMatrixElement, SVGFEComponentTransferElement,SVGComponentTransferFunctionElement,SVGFEFuncRElement,SVGFEFuncGElement, SVGFEFuncBElement, SVGFEFuncAElement, SVGFECompositeElement, SVGFEConvolveMatrixElement, SVGFEDiffuseLightingElement, SVGFEDistantLightElement, SVGFEPointLightElement, SVGFESpotLightElement, SVGFEDisplacementMapElement, SVGFEFloodElement, SVGFEGaussianBlurElement, SVGFEImageElement, SVGFEMergeElement, SVGFEMergeNodeElement, SVGFEMorphologyElement, SVGFEOffsetElement, SVGFESpecularLightingElement,SVGFETileElement,SVGFETurbulenceElement.

 

Interface SVGFilterElement

The SVGFilterElementinterface corresponds to the 'filter' element.


IDL Definition

 
interface SVGFilterElement : 
                SVGElement,
                SVGURIReference,
                SVGLangSpace,
                SVGExternalResourcesRequired,
                SVGStylable,
                SVGUnitTypes { 
 
  readonly attribute SVGAnimatedEnumeration filterUnits;
  readonly attribute SVGAnimatedEnumeration primitiveUnits;
  readonly attribute SVGAnimatedLength      x;
  readonly attribute SVGAnimatedLength      y;
  readonly attribute SVGAnimatedLength      width;
  readonly attribute SVGAnimatedLength      height;
  readonly attribute SVGAnimatedInteger    filterResX;
  readonly attribute SVGAnimatedInteger    filterResY;
 
  void setFilterRes ( in unsigned long filterResX, in unsigned long filterResY );
};

 

Attributes

readonly SVGAnimatedEnumeration filterUnits

Corresponds toattribute filterUnits on the given 'filter' element. Takes one of the constants definedin SVGUnitTypes.

readonly SVGAnimatedEnumeration primitiveUnits

Corresponds toattribute primitiveUnits on the given 'filter' element. Takes one of the constants definedin SVGUnitTypes.

readonly SVGAnimatedLength x

Corresponds toattribute x on the given 'filter'element.

readonly SVGAnimatedLength y

Corresponds toattribute y on the given 'filter'element.

readonly SVGAnimatedLength width

Corresponds toattribute width on the given 'filter' element.

readonly SVGAnimatedLength height

Corresponds toattribute height on the given 'filter' element.

readonly SVGAnimatedInteger filterResX

Corresponds toattribute filterRes on the given 'filter' element. Contains the X component ofattribute filterRes.

readonly SVGAnimatedInteger filterResY

Corresponds toattribute filterRes on the given 'filter' element. Contains the Y component (possiblycomputed automatically) of attribute filterRes.

Methods

setFilterRes

Sets the valuesfor attribute filterRes.

Parameters

in unsigned long filterResX

 

The X component of attribute filterRes.

in unsigned long filterResY

 

The Y component of attribute filterRes.

No Return Value

No Exceptions

 

Interface SVGFilterPrimitiveStandardAttributes

This interface defines the set of DOM attributes that arecommon across the filter interfaces.


IDL Definition

 
interface SVGFilterPrimitiveStandardAttributes : SVGStylable { 
  readonly attribute SVGAnimatedLength x;
  readonly attribute SVGAnimatedLength y;
  readonly attribute SVGAnimatedLength width;
  readonly attribute SVGAnimatedLength height;
  readonly attribute SVGAnimatedString result;
};

 

Attributes

readonly SVGAnimatedLength x

Corresponds toattribute x on the given element.

readonly SVGAnimatedLength y

Corresponds toattribute y on the given element.

readonly SVGAnimatedLength width

Corresponds toattribute width on the given element.

readonly SVGAnimatedLength height

Corresponds toattribute height on the given element.

readonly SVGAnimatedString result

Corresponds toattribute result on the given element.

 

Interface SVGFEBlendElement

The SVGFEBlendElementinterface corresponds to the 'feBlend' element.


IDL Definition

 
interface SVGFEBlendElement : 
                SVGElement,
                SVGFilterPrimitiveStandardAttributes { 
 
  // Blend Mode Types
  const unsigned short SVG_FEBLEND_MODE_UNKNOWN  = 0;
  const unsigned short SVG_FEBLEND_MODE_NORMAL   = 1;
  const unsigned short SVG_FEBLEND_MODE_MULTIPLY = 2;
  const unsigned short SVG_FEBLEND_MODE_SCREEN   = 3;
  const unsigned short SVG_FEBLEND_MODE_DARKEN   = 4;
  const unsigned short SVG_FEBLEND_MODE_LIGHTEN  = 5;
 
  readonly attribute SVGAnimatedString      in1;
  readonly attribute SVGAnimatedString      in2;
  readonly attribute SVGAnimatedEnumeration mode;
};

 

Definition group Blend Mode Types

Definedconstants

SVG_FEBLEND_MODE_UNKNOWN

 

The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.

SVG_FEBLEND_MODE_NORMAL

 

Corresponds to value normal.

SVG_FEBLEND_MODE_MULTIPLY

 

Corresponds to value multiply.

SVG_FEBLEND_MODE_SCREEN

 

Corresponds to value screen.

SVG_FEBLEND_MODE_DARKEN

 

Corresponds to value darken.

SVG_FEBLEND_MODE_LIGHTEN

 

Corresponds to value lighten.

Attributes

readonly SVGAnimatedString in1

Corresponds toattribute in on the given 'feBlend' element.

readonly SVGAnimatedString in2

Corresponds toattribute in2 on the given 'feBlend' element.

readonly SVGAnimatedEnumeration mode

Corresponds toattribute mode on the given 'feBlend' element. Takes one of the Blend Mode Types.

 

Interface SVGFEColorMatrixElement

The SVGFEColorMatrixElementinterface corresponds to the 'feColorMatrix'element.


IDL Definition

 
interface SVGFEColorMatrixElement : 
                SVGElement,
                SVGFilterPrimitiveStandardAttributes { 
 
  // Color Matrix Types
  const unsigned short SVG_FECOLORMATRIX_TYPE_UNKNOWN          = 0;
  const unsigned short SVG_FECOLORMATRIX_TYPE_MATRIX           = 1;
  const unsigned short SVG_FECOLORMATRIX_TYPE_SATURATE         = 2;
  const unsigned short SVG_FECOLORMATRIX_TYPE_HUEROTATE        = 3;
  const unsigned short SVG_FECOLORMATRIX_TYPE_LUMINANCETOALPHA = 4;
 
  readonly attribute SVGAnimatedString      in1;
  readonly attribute SVGAnimatedEnumeration type;
  readonly attribute SVGAnimatedNumberList  values;
};

 

Definition group Color Matrix Types

Definedconstants

SVG_FECOLORMATRIX_TYPE_UNKNOWN

 

The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.

SVG_FECOLORMATRIX_TYPE_MATRIX

 

Corresponds to value matrix.

SVG_FECOLORMATRIX_TYPE_SATURATE

 

Corresponds to value saturate.

SVG_FECOLORMATRIX_TYPE_HUEROTATE

 

Corresponds to value hueRotate.

SVG_FECOLORMATRIX_TYPE_LUMINANCETOALPHA

 

Corresponds to value luminanceToAlpha.

Attributes

readonly SVGAnimatedString in1

Corresponds toattribute in on the given 'feColorMatrix' element.

readonly SVGAnimatedEnumeration type

Corresponds toattribute type on the given 'feColorMatrix' element. Takes one of the ColorMatrix Types.

readonly SVGAnimatedNumberList values

Corresponds toattribute values on the given 'feColorMatrix' element.

Provides access to the contentsof the values attribute.

 

Interface SVGFEComponentTransferElement

The SVGFEComponentTransferElementinterface corresponds to the 'feComponentTransfer'element.


IDL Definition

 
interface SVGFEComponentTransferElement : 
                SVGElement,
                SVGFilterPrimitiveStandardAttributes { 
 
  readonly attribute SVGAnimatedString in1;
};

 

Attributes

readonly SVGAnimatedString in1

Corresponds toattribute in on the given 'feComponentTransfer' element.

 

Interface SVGComponentTransferFunctionElement

This interface defines a base interface used by thecomponent transfer function interfaces.


IDL Definition

 
interface SVGComponentTransferFunctionElement : SVGElement { 
  // Component Transfer Types
  const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_UNKNOWN  = 0;
  const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_IDENTITY = 1;
  const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_TABLE    = 2;
  const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_DISCRETE    = 3;
  const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_LINEAR   = 4;
  const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_GAMMA    = 5;
 
  readonly attribute SVGAnimatedEnumeration type;
  readonly attribute SVGAnimatedNumberList  tableValues;
  readonly attribute SVGAnimatedNumber      slope;
  readonly attribute SVGAnimatedNumber      intercept;
  readonly attribute SVGAnimatedNumber      amplitude;
  readonly attribute SVGAnimatedNumber      exponent;
  readonly attribute SVGAnimatedNumber      offset;
};

 

Definition group Component TransferTypes

Definedconstants

SVG_FECOMPONENTTRANSFER_TYPE_UNKNOWN

 

The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.

SVG_FECOMPONENTTRANSFER_TYPE_IDENTITY

 

Corresponds to value identity.

SVG_FECOMPONENTTRANSFER_TYPE_TABLE

 

Corresponds to value table.

SVG_FECOMPONENTTRANSFER_TYPE_DISCRETE

 

Corresponds to value discrete.

SVG_FECOMPONENTTRANSFER_TYPE_LINEAR

 

Corresponds to value linear.

SVG_FECOMPONENTTRANSFER_TYPE_GAMMA

 

Corresponds to value gamma.

Attributes

readonly SVGAnimatedEnumeration type

Corresponds toattribute type on the given element. Takes one ofthe Component Transfer Types.

readonly SVGAnimatedNumberList tableValues

Corresponds toattribute tableValues on the given element.

readonly SVGAnimatedNumber slope

Corresponds toattribute slope on the given element.

readonly SVGAnimatedNumber intercept

Corresponds toattribute intercept on the given element.

readonly SVGAnimatedNumber amplitude

Corresponds toattribute amplitude on the given element.

readonly SVGAnimatedNumber exponent

Corresponds toattribute exponent on the given element.

readonly SVGAnimatedNumber offset

Corresponds toattribute offset on the given element.

 

Interface SVGFEFuncRElement

The SVGFEFuncRElementinterface corresponds to the 'feFuncR' element.


IDL Definition

 
interface SVGFEFuncRElement : SVGComponentTransferFunctionElement {};

 

 

Interface SVGFEFuncGElement

The SVGFEFuncGElementinterface corresponds to the 'feFuncG' element.


IDL Definition

 
interface SVGFEFuncGElement : SVGComponentTransferFunctionElement {};

 

 

Interface SVGFEFuncBElement

The SVGFEFuncBElementinterface corresponds to the 'feFuncB' element.


IDL Definition

 
interface SVGFEFuncBElement : SVGComponentTransferFunctionElement {};

 

 

Interface SVGFEFuncAElement

The SVGFEFuncAElementinterface corresponds to the 'feFuncA' element.


IDL Definition

 
interface SVGFEFuncAElement : SVGComponentTransferFunctionElement {};

 

 

Interface SVGFECompositeElement

The SVGFECompositeElementinterface corresponds to the 'feComposite'element.


IDL Definition

 
interface SVGFECompositeElement : 
                SVGElement,
                SVGFilterPrimitiveStandardAttributes { 
 
  // Composite Operators
  const unsigned short SVG_FECOMPOSITE_OPERATOR_UNKNOWN    = 0;
  const unsigned short SVG_FECOMPOSITE_OPERATOR_OVER       = 1;
  const unsigned short SVG_FECOMPOSITE_OPERATOR_IN         = 2;
  const unsigned short SVG_FECOMPOSITE_OPERATOR_OUT        = 3;
  const unsigned short SVG_FECOMPOSITE_OPERATOR_ATOP       = 4;
  const unsigned short SVG_FECOMPOSITE_OPERATOR_XOR        = 5;
  const unsigned short SVG_FECOMPOSITE_OPERATOR_ARITHMETIC = 6;
 
  readonly attribute SVGAnimatedString      in1;
  readonly attribute SVGAnimatedString      in2;
  readonly attribute SVGAnimatedEnumeration operator;
  readonly attribute SVGAnimatedNumber      k1;
  readonly attribute SVGAnimatedNumber      k2;
  readonly attribute SVGAnimatedNumber      k3;
  readonly attribute SVGAnimatedNumber      k4;
};

 

Definition group Composite Operators

Definedconstants

SVG_FECOMPOSITE_OPERATOR_UNKNOWN

 

The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.

SVG_FECOMPOSITE_OPERATOR_OVER

 

Corresponds to value over.

SVG_FECOMPOSITE_OPERATOR_IN

 

Corresponds to value in.

SVG_FECOMPOSITE_OPERATOR_OUT

 

Corresponds to value out.

SVG_FECOMPOSITE_OPERATOR_ATOP

 

Corresponds to value atop.

SVG_FECOMPOSITE_OPERATOR_XOR

 

Corresponds to value xor.

SVG_FECOMPOSITE_OPERATOR_ARITHMETIC

 

Corresponds to value arithmetic.

Attributes

readonly SVGAnimatedString in1

Corresponds toattribute in on the given 'feComposite' element.

readonly SVGAnimatedString in2

Corresponds toattribute in2 on the given 'feComposite' element.

readonly SVGAnimatedEnumeration operator

Corresponds toattribute operator on the given 'feComposite' element. Takes one of the CompositeOperators.

readonly SVGAnimatedNumber k1

Corresponds toattribute k1 on the given 'feComposite' element.

readonly SVGAnimatedNumber k2

Corresponds toattribute k2 on the given 'feComposite' element.

readonly SVGAnimatedNumber k3

Corresponds toattribute k3 on the given 'feComposite' element.

readonly SVGAnimatedNumber k4

Corresponds toattribute k4 on the given 'feComposite' element.

 

Interface SVGFEConvolveMatrixElement

The SVGFEConvolveMatrixElementinterface corresponds to the 'feConvolveMatrix'element.


IDL Definition

 
interface SVGFEConvolveMatrixElement : 
                SVGElement,
                SVGFilterPrimitiveStandardAttributes { 
 
  // Edge Mode Values
  const unsigned short SVG_EDGEMODE_UNKNOWN   = 0;
  const unsigned short SVG_EDGEMODE_DUPLICATE = 1;
  const unsigned short SVG_EDGEMODE_WRAP      = 2;
  const unsigned short SVG_EDGEMODE_NONE      = 3;
 
  readonly attribute SVGAnimatedInteger     orderX;
  readonly attribute SVGAnimatedInteger     orderY;
  readonly attribute SVGAnimatedNumberList  kernelMatrix;
  readonly attribute SVGAnimatedNumber      divisor;
  readonly attribute SVGAnimatedNumber      bias;
  readonly attribute SVGAnimatedInteger     targetX;
  readonly attribute SVGAnimatedInteger     targetY;
  readonly attribute SVGAnimatedEnumeration edgeMode;
  readonly attribute SVGAnimatedLength      kernelUnitLengthX;
  readonly attribute SVGAnimatedLength      kernelUnitLengthY;
  readonly attribute SVGAnimatedBoolean     preserveAlpha;
};

 

Definition group Edge Mode Values

Definedconstants

SVG_EDGEMODE_UNKNOWN

 

The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.

SVG_EDGEMODE_DUPLICATE

 

Corresponds to value duplicate.

SVG_EDGEMODE_WRAP

 

Corresponds to value wrap.

SVG_EDGEMODE_NONE

 

Corresponds to value none.

Attributes

readonly SVGAnimatedInteger orderX

Corresponds toattribute order on the given 'feConvolveMatrix' element.

readonly SVGAnimatedInteger orderY

Corresponds toattribute order on the given 'feConvolveMatrix' element.

readonly SVGAnimatedNumberList kernelMatrix

Corresponds toattribute kernelMatrix on the given element.

readonly SVGAnimatedNumber divisor

Corresponds toattribute divisor on the given 'feConvolveMatrix' element.

readonly SVGAnimatedNumber bias

Corresponds toattribute bias on the given 'feConvolveMatrix' element.

readonly SVGAnimatedInteger targetX

Corresponds toattribute targetX on the given 'feConvolveMatrix' element.

readonly SVGAnimatedInteger targetY

Corresponds toattribute targetY on the given 'feConvolveMatrix' element.

readonly SVGAnimatedEnumeration edgeMode

Corresponds toattribute edgeMode on the given 'feConvolveMatrix' element. Takes one of the EdgeMode Types.

readonly SVGAnimatedLength kernelUnitLengthX

Corresponds toattribute kernelUnitLength on the given 'feConvolveMatrix' element.

readonly SVGAnimatedLength kernelUnitLengthY

Corresponds toattribute kernelUnitLength on the given 'feConvolveMatrix' element.

readonly SVGAnimatedBoolean preserveAlpha

Corresponds toattribute preserveAlpha on the given 'feConvolveMatrix' element.

 

Interface SVGFEDiffuseLightingElement

The SVGFEDiffuseLightingElementinterface corresponds to the 'feDiffuseLighting'element.


IDL Definition

 
interface SVGFEDiffuseLightingElement : 
                SVGElement,
                SVGFilterPrimitiveStandardAttributes { 
 
  readonly attribute SVGAnimatedString in1;
  readonly attribute SVGAnimatedNumber surfaceScale;
  readonly attribute SVGAnimatedNumber diffuseConstant;
};

 

Attributes

readonly SVGAnimatedString in1

Corresponds toattribute in on the given 'feDiffuseLighting' element.

readonly SVGAnimatedNumber surfaceScale

Corresponds toattribute surfaceScale on the given 'feDiffuseLighting' element.

readonly SVGAnimatedNumber diffuseConstant

Corresponds toattribute diffuseConstant on the given 'feDiffuseLighting' element.

 

Interface SVGFEDistantLightElement

The SVGFEDistantLightElementinterface corresponds to the 'feDistantLight'element.


IDL Definition

 
interface SVGFEDistantLightElement : SVGElement { 
  readonly attribute SVGAnimatedNumber azimuth;
  readonly attribute SVGAnimatedNumber elevation;
};

 

Attributes

readonly SVGAnimatedNumber azimuth

Corresponds toattribute azimuth on the given 'feDistantLight' element.

readonly SVGAnimatedNumber elevation

Corresponds toattribute elevation on the given 'feDistantLight' element.

 

Interface SVGFEPointLightElement

The SVGFEPointLightElementinterface corresponds to the 'fePointLight'element.


IDL Definition

 
interface SVGFEPointLightElement : SVGElement { 
  readonly attribute SVGAnimatedNumber x;
  readonly attribute SVGAnimatedNumber y;
  readonly attribute SVGAnimatedNumber z;
};

 

Attributes

readonly SVGAnimatedNumber x

Corresponds toattribute x on the given 'fePointLight'element.

readonly SVGAnimatedNumber y

Corresponds toattribute y on the given 'fePointLight'element.

readonly SVGAnimatedNumber z

Corresponds toattribute z on the given 'fePointLight'element.

 

Interface SVGFESpotLightElement

The SVGFESpotLightElementinterface corresponds to the 'feSpotLight'element.


IDL Definition

 
interface SVGFESpotLightElement : SVGElement { 
  readonly attribute SVGAnimatedNumber x;
  readonly attribute SVGAnimatedNumber y;
  readonly attribute SVGAnimatedNumber z;
  readonly attribute SVGAnimatedNumber pointsAtX;
  readonly attribute SVGAnimatedNumber pointsAtY;
  readonly attribute SVGAnimatedNumber pointsAtZ;
  readonly attribute SVGAnimatedNumber specularExponent;
  readonly attribute SVGAnimatedNumber limitingConeAngle;
};

 

Attributes

readonly SVGAnimatedNumber x

Corresponds toattribute x on the given 'feSpotLight'element.

readonly SVGAnimatedNumber y

Corresponds toattribute y on the given 'feSpotLight'element.

readonly SVGAnimatedNumber z

Corresponds toattribute z on the given 'feSpotLight'element.

readonly SVGAnimatedNumber pointsAtX

Corresponds to attributepointsAtX on the given 'feSpotLight'element.

readonly SVGAnimatedNumber pointsAtY

Corresponds toattribute pointsAtY on the given 'feSpotLight' element.

readonly SVGAnimatedNumber pointsAtZ

Corresponds toattribute pointsAtZ on the given 'feSpotLight' element.

readonly SVGAnimatedNumber specularExponent

Corresponds toattribute specularExponent on the given 'feSpotLight' element.

readonly SVGAnimatedNumber limitingConeAngle

Corresponds toattribute limitingConeAngle on the given 'feSpotLight' element.

 

Interface SVGFEDisplacementMapElement

The SVGFEDisplacementMapElementinterface corresponds to the 'feDisplacementMap'element.


IDL Definition

 
interface SVGFEDisplacementMapElement : 
                SVGElement,
                SVGFilterPrimitiveStandardAttributes { 
 
  // Channel Selectors
  const unsigned short SVG_CHANNEL_UNKNOWN = 0;
  const unsigned short SVG_CHANNEL_R       = 1;
  const unsigned short SVG_CHANNEL_G       = 2;
  const unsigned short SVG_CHANNEL_B       = 3;
  const unsigned short SVG_CHANNEL_A       = 4;
 
  readonly attribute SVGAnimatedString      in1;
  readonly attribute SVGAnimatedString      in2;
  readonly attribute SVGAnimatedNumber      scale;
  readonly attribute SVGAnimatedEnumeration xChannelSelector;
  readonly attribute SVGAnimatedEnumeration yChannelSelector;
};

 

Definition group Channel Selectors

Definedconstants

SVG_CHANNEL_UNKNOWN

 

The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.

SVG_CHANNEL_R

 

Corresponds to value R.

SVG_CHANNEL_G

 

Corresponds to value G.

SVG_CHANNEL_B

 

Corresponds to value B.

SVG_CHANNEL_A

 

Corresponds to value A.

Attributes

readonly SVGAnimatedString in1

Corresponds toattribute in on the given 'feDisplacementMap' element.

readonly SVGAnimatedString in2

Corresponds toattribute in2 on the given 'feDisplacementMap' element.

readonly SVGAnimatedNumber scale

Corresponds toattribute scale on the given 'feDisplacementMap' element.

readonly SVGAnimatedEnumeration xChannelSelector

Corresponds toattribute xChannelSelector on the given 'feDisplacementMap' element. Takes one of the ChannelSelectors.

readonly SVGAnimatedEnumeration yChannelSelector

Corresponds toattribute yChannelSelector on the given 'feDisplacementMap' element. Takes one of the ChannelSelectors.

 

Interface SVGFEFloodElement

The SVGFEFloodElementinterface corresponds to the 'feFlood' element.


IDL Definition

 
interface SVGFEFloodElement : 
                SVGElement,
                SVGFilterPrimitiveStandardAttributes { 
 
  readonly attribute SVGAnimatedString      in1;
};

 

Attributes

readonly SVGAnimatedString in1

Corresponds to attributein on the given 'feFlood'element.

 

Interface SVGFEGaussianBlurElement

The SVGFEGaussianBlurElementinterface corresponds to the 'feGaussianBlur'element.


IDL Definition

 
interface SVGFEGaussianBlurElement : 
                SVGElement,
                SVGFilterPrimitiveStandardAttributes { 
 
  readonly attribute SVGAnimatedString in1;
  readonly attribute SVGAnimatedNumber stdDeviationX;
  readonly attribute SVGAnimatedNumber stdDeviationY;
 
  void setStdDeviation ( in float stdDeviationX, in float stdDeviationY );
};

 

Attributes

readonly SVGAnimatedString in1

Corresponds toattribute in on the given 'feGaussianBlur' element.

readonly SVGAnimatedNumber stdDeviationX

Corresponds toattribute stdDeviation on the given 'feGaussianBlur' element. Contains the X component ofattribute stdDeviation.

readonly SVGAnimatedNumber stdDeviationY

Corresponds toattribute stdDeviation on the given 'feGaussianBlur' element. Contains the Y component(possibly computed automatically) of attribute stdDeviation.

Methods

setStdDeviation

Sets the valuesfor attribute stdDeviation.

Parameters

in float stdDeviationX

 

The X component of attribute stdDeviation.

in float stdDeviationY

 

The Y component of attribute stdDeviation.

No Return Value

No Exceptions

 

Interface SVGFEImageElement

The SVGFEImageElementinterface corresponds to the 'feImage' element.


IDL Definition

 
interface SVGFEImageElement : 
                SVGElement,
                SVGURIReference,
                SVGLangSpace,
                SVGExternalResourcesRequired,
                SVGFilterPrimitiveStandardAttributes {};

 

 

Interface SVGFEMergeElement

The SVGFEMergeElementinterface corresponds to the 'feMerge' element.


IDL Definition

 
interface SVGFEMergeElement : 
                SVGElement,
                SVGFilterPrimitiveStandardAttributes {};

 

 

Interface SVGFEMergeNodeElement

The SVGFEMergeNodeElementinterface corresponds to the 'feMergeNode'element.


IDL Definition

 
interface SVGFEMergeNodeElement : SVGElement { 
  readonly attribute SVGAnimatedString in1;
};

 

Attributes

readonly SVGAnimatedString in1

Corresponds toattribute in on the given 'feMergeNode' element.

 

Interface SVGFEMorphologyElement

The SVGFEMorphologyElementinterface corresponds to the 'feMorphology'element.


IDL Definition

 
interface SVGFEMorphologyElement : 
                SVGElement,
                SVGFilterPrimitiveStandardAttributes { 
 
  // Morphology Operators
  const unsigned short SVG_MORPHOLOGY_OPERATOR_UNKNOWN = 0;
  const unsigned short SVG_MORPHOLOGY_OPERATOR_ERODE   = 1;
  const unsigned short SVG_MORPHOLOGY_OPERATOR_DILATE  = 2;
 
  readonly attribute SVGAnimatedString      in1;
  readonly attribute SVGAnimatedEnumeration operator;
  readonly attribute SVGAnimatedLength      radiusX;
  readonly attribute SVGAnimatedLength      radiusY;
};

 

Definition group Morphology Operators

Definedconstants

SVG_MORPHOLOGY_OPERATOR_UNKNOWN

 

The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.

SVG_MORPHOLOGY_OPERATOR_ERODE

 

Corresponds to value erode.

SVG_MORPHOLOGY_OPERATOR_DILATE

 

Corresponds to value dilate.

Attributes

readonly SVGAnimatedString in1

Corresponds toattribute in on the given 'feMorphology' element.

readonly SVGAnimatedEnumeration operator

Corresponds toattribute operator on the given 'feMorphology' element. Takes one of the MorphologyOperators.

readonly SVGAnimatedLength radiusX

Corresponds toattribute radius on the given 'feMorphology' element.

readonly SVGAnimatedLength radiusY

Corresponds toattribute radius on the given 'feMorphology' element.

 

Interface SVGFEOffsetElement

The SVGFEOffsetElementinterface corresponds to the 'feOffset'element.


IDL Definition

 
interface SVGFEOffsetElement : 
                SVGElement,
                SVGFilterPrimitiveStandardAttributes { 
 
  readonly attribute SVGAnimatedString in1;
  readonly attribute SVGAnimatedNumber dx;
  readonly attribute SVGAnimatedNumber dy;
};

 

Attributes

readonly SVGAnimatedString in1

Corresponds toattribute in on the given 'feOffset' element.

readonly SVGAnimatedNumber dx

Corresponds toattribute dx on the given 'feOffset' element.

readonly SVGAnimatedNumber dy

Corresponds toattribute dy on the given 'feOffset' element.

 

Interface SVGFESpecularLightingElement

The SVGFESpecularLightingElementinterface corresponds to the 'feSpecularLighting'element.


IDL Definition

 
interface SVGFESpecularLightingElement : 
                SVGElement,
                SVGFilterPrimitiveStandardAttributes { 
 
  readonly attribute SVGAnimatedString in1;
  readonly attribute SVGAnimatedNumber surfaceScale;
  readonly attribute SVGAnimatedNumber specularConstant;
  readonly attribute SVGAnimatedNumber specularExponent;
};

 

Attributes

readonly SVGAnimatedString in1

Corresponds toattribute in on the given 'feSpecularLighting' element.

readonly SVGAnimatedNumber surfaceScale

Corresponds toattribute surfaceScale on the given 'feSpecularLighting' element.

readonly SVGAnimatedNumber specularConstant

Corresponds toattribute specularConstant on the given 'feSpecularLighting' element.

readonly SVGAnimatedNumber specularExponent

Corresponds toattribute specularExponent on the given 'feSpecularLighting' element.

 

Interface SVGFETileElement

The SVGFETileElementinterface corresponds to the 'feTile' element.


IDL Definition

 
interface SVGFETileElement : 
                SVGElement,
                SVGFilterPrimitiveStandardAttributes { 
 
  readonly attribute SVGAnimatedString in1;
};

 

Attributes

readonly SVGAnimatedString in1

Corresponds toattribute in on the given 'feTile' element.

 

Interface SVGFETurbulenceElement

The SVGFETurbulenceElementinterface corresponds to the 'feTurbulence'element.


IDL Definition

 
interface SVGFETurbulenceElement : 
                SVGElement,
                SVGFilterPrimitiveStandardAttributes { 
 
  // Turbulence Types
  const unsigned short SVG_TURBULENCE_TYPE_UNKNOWN      = 0;
  const unsigned short SVG_TURBULENCE_TYPE_FRACTALNOISE = 1;
  const unsigned short SVG_TURBULENCE_TYPE_TURBULENCE   = 2;
  // Stitch Options
  const unsigned short SVG_STITCHTYPE_UNKNOWN  = 0;
  const unsigned short SVG_STITCHTYPE_STITCH   = 1;
  const unsigned short SVG_STITCHTYPE_NOSTITCH = 2;
 
  readonly attribute SVGAnimatedNumber      baseFrequencyX;
  readonly attribute SVGAnimatedNumber      baseFrequencyY;
  readonly attribute SVGAnimatedInteger     numOctaves;
  readonly attribute SVGAnimatedNumber      seed;
  readonly attribute SVGAnimatedEnumeration stitchTiles;
  readonly attribute SVGAnimatedEnumeration type;
};

 

Definition group Turbulence Types

Definedconstants

SVG_TURBULENCE_TYPE_UNKNOWN

 

The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.

SVG_TURBULENCE_TYPE_FRACTALNOISE

 

Corresponds to value fractalNoise.

SVG_TURBULENCE_TYPE_TURBULENCE

 

Corresponds to value turbulence.

Definition group Stitch Options

Definedconstants

SVG_STITCHTYPE_UNKNOWN

 

The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.

SVG_STITCHTYPE_STITCH

 

Corresponds to value stitch.

SVG_STITCHTYPE_NOSTITCH

 

Corresponds to value noStitch.

Attributes

readonly SVGAnimatedNumber baseFrequencyX

Corresponds toattribute baseFrequencyX on the given 'feTurbulence' element.

readonly SVGAnimatedNumber baseFrequencyY

Corresponds toattribute baseFrequencyY on the given 'feTurbulence' element.

readonly SVGAnimatedInteger numOctaves

Corresponds toattribute numOctaves on the given 'feTurbulence' element.

readonly SVGAnimatedNumber seed

Corresponds toattribute seed on the given 'feTurbulence' element.

readonly SVGAnimatedEnumeration stitchTiles

Corresponds toattribute stitchTiles on the given 'feTurbulence' element. Takes one of the StitchingOptions.

readonly SVGAnimatedEnumeration type

Corresponds toattribute type on the given 'feTurbulence' element. Takes one of the TurbulenceTypes.

previous next   contents   elements   attributes   properties   index  

敬爱的老顽童
关注
专栏目录
VTK- 创建圆柱体
qq_40041064的博客
02-09 277
本博文主要研究vtkTubeFilter创建Tube的实现方式，并创建自定义结构的圆柱实现方式。下图vtkTubeFilter创建的Sides数量分别为100和9的情况。下图是vtkCylinderSource创建的圆柱体结论：重写vtkTubeFilter类，实现该结构的圆柱创建。
在 html 中用加色法混合颜色
see11see 的专栏
05-28 4495
本文通过解决一个假想的问题介绍了 css screen 混合模式，并介绍了如何用 svg 滤镜、canvas 2d、canvas webgl 实现相同的效果。
走入SVG
07-12
SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG是W3C(World Wide Web ConSortium 在2000年8月制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。
php过滤svg标签,SVG <filter>元素
weixin_42136477的博客
03-11 294
SVG使用元素来定义滤镜。 元素使用一个id属性来唯一标识它。滤镜在元素中定义，然后由它们的id通过图形元素引用。SVG提供了一组丰富的滤镜。 以下是常用滤镜的列表。feBlendfeColorMatrixfeComponentTransferfeCompositefeConvolveMatrixfeDiffuseLightingfeDisplacementMapfeFloodfeGaussian...
Camera测试-- ITS测试
Cam_韦的博客
08-31 9324
1、名词解释 ITS是一个对Android摄像头生成的图像进行测试的框架。每个测试的一般目标是按照所需的方式配置相机并捕获一个或 更多的照片，然后检查这些照片，看看它们是否包含预期的图像数据。许多在这些测试中，将要求照相机对着一个特定的目标图或被照亮特定的强度。它的框架位于KitKat的Android源代码的pdk/apps/区域版本，但是转移到CTS验证器测试装具中(在源代码的CTS /区域下)。 2、环境准备 android-cts-verifier\android-cts-verifi...
将 CSS 过滤器与 SVG 一起使用的完整指南
分享身边生活经验blog
09-25 863
SVG 或 Scalable Vector Graphics 是一种基于 XML 的矢量图像格式，用于显示二维图形。XML 是另一个花哨的首字母缩写词，代表可扩展标记语言。XML 用于存储和传输数据，并定义您的标签。回到 SVG。SVG 兼作图像和文档格式。JPEG 和 PNG 等常规图像格式由放大时通常会丢失质量的像素组成。SVG 的不同之处在于，无论您放大多少，它们都能保持质量。这是可能的，因为它们是由数学公式组成的。让我们看看 SVG 的底层是什么。首先，在代码编辑器中打开 SVG 图像。
CSS3 滤镜 webkit-filter详细介绍及使用方法
09-22
CSS3 开始也有滤镜（不是 IE 的那种滤镜），这些滤镜效果最初是用于 SVG 的，W3C 将其引入到 CSS3 中，然后制定了 CSS Filter Effects 1.0 的规范，Webkit 率先支持了它,需要了解的朋友可以参考下
cocos2d-x与着色器设计--入门篇(游云凌天原创)
danjinxiangsi的专栏
02-26 4171
着色器(Shader)应用与计算机图形学领域，指一组提供计算机图形资源在渲染时执行的指令。 随着手机应用以及移动端游戏这几年的发展，着色器设计凭借着自身的灵活性以及适应性，越来越多的被移动端开发者所接受。 本人在App Store上发布了一个原创免费开源无广告的关于着色器的教育型软件，以研究着色器在移动端的设计为目的。 可惜由于时间匆忙，并没有做中文的本地化。所以将写几篇博客，手把手的教一些
html5 svg 第十章 filters过滤-上拿-理疗-脚底按摩
家门口种果树，不怕馋
08-03 4831
文章内容均来源于http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Filters 前面的章节已经给你创造伟大的精度和细节传达信息的图形的基础。如果你打算在春季野餐，你想要的精确地图。当你在报纸上的天气预报的图形描述看，你想“只是事实。” 如果你问后来形容天的野餐，没有人希望气象部门统计清脆的朗诵。同样，没有人希望看到一个春天...
实现加载提示组件
WindrunnerMax
12-29 399
实现加载提示组件 在开发时经常需要用到加载提示，例如发起一个XHR请求时就需要给予用户一个交互的反馈，实现一个加载提示组件，重要的部分已经做出注释。 实例 <!DOCTYPE html> <html> <head> <title>loading</title> <style type="text/css"> #__loading__{ /* 设置遮罩层 */ position: f
SVG 滤镜 阴影 渐变 以及获取地图坐标 0718
m0_56381561的博客
07-18 261
SVG知识点
Vue使用element-ui/plus组件布局容器container失效解决方法
最新发布
only_learn的博客
10-20 4679
注意，我在SideNav，Header,Main,Footer组件套了el-aside,el-header...原来，elementui不支持这种写法，在Home里面应该完全遵循官网的写法，这个错我遇到了好几次，每一次都花了很长时间解决，还是决定写个笔记记录一下。，不能写在子组件里面然后引入，不然elementui不会识别为布局容器。我在确定elementui引入正确的情况下是这样写的。在使用elementu官网的布局容器时，他是这样的。当然错误，布局一片混乱。想了一下午终于懂了。
SVG的基本使用方法
scc0413的博客
07-03 4210
SVG的使用方法
svg学习笔记
希望我快乐
10-21 285
standalone：规定此 SVG 文件是否是"独立的"，或含有对外部文件的引用，standalone=“no” 意味着 SVG 文档会引用一个外部文件 version：定义所使用的 SVG 版本 xmlns：定义 SVG 命名空间 SVG 文件可通过以下标签嵌入 HTML 文档： <embed>、<object> 或者 <iframe> SVG的代码可以直接...
SVG过滤器feColorMatrix矩阵变换效果用法详解
热门推荐
陈小峰（iefreer）的专栏
04-22 1万+
在计算机图形学（数学）中，矩阵乘法可用于把空间向量进行几何变换。我们可以把颜色的值（RGBA）表示成一个四维空间向量：color = (r, g, b, a); 那么就可以应用矩阵相乘的方法来对其进行变换操作。SVG标准中的feColorMatrix，当类型取值为matrix时，就是利用这个方法来实现的图像过滤效果。
直播预览层添加滤镜效果(CIFilter使用场景)
田风有的博客
05-16 3056
直播预览层添加滤镜效果 原理，在显示之前，提前对图片进行滤镜处理，把处理后的图片展示出来就好了. CIFiter(滤镜类)：给图片添加特殊效果（模糊，高亮等等）. CIFiter滤镜分类(一个滤镜可能属于多个分类) kCICategoryDistortionEffect 扭曲效果，比如bump、旋转、hole kCICategoryGeometryAdjustme
android 实现滤镜效果
超神冉
09-01 3231
最近在看关于自定义控件的东西，顺便看到了关于滤镜的东西，就写出来分享一下 这个有三个已知子类，写一个滤镜效果，只需要第一个已知子类就够用了，这个类构造方法public ColorMatrixColorFilter (ColorMatrix matrix)，ColorMatrix的初始化则需要一个4*5的fload行的矩阵 大家看下面就知道了 这是我的写法
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值