滤镜效果模块 第 1 级

1. 简介

本节不具有规范性

滤镜效果是应用于元素的图形操作，当元素被绘制到文档中时起作用。它是一种基于图像的效果，输入可以是零个或多个图像，效果的特定参数，然后产生一个图像作为输出。输出的图像可以渲染到文档中替代原始元素，作为另一个滤镜效果的输入图像，或作为CSS图像值提供。

一个简单的滤镜效果示例是“填充色”，它不需要任何图像输入，但有一个定义颜色的参数。效果产生一个完全填充指定颜色的输出图像。一个稍微复杂的示例是“反转”，它需要一个图像输入（通常是元素按正常方式渲染到父级的图像），并调整每个像素，使其具有相反的颜色值。

滤镜效果以两种复杂度的层级暴露出来：

1. 一组简单的预设滤镜函数，通过名称调用。虽然不够强大，但这些函数方便易懂，提供了一种简单的方法来实现常见效果，如模糊。预设滤镜也可以通过[CSS3-ANIMATIONS]进行动画化。

2. 通过标记描述的各个滤镜效果的图，定义了整体效果。该图对其输入不具有依赖性，因此效果可以应用于任何内容。虽然这些图是由可能单独简单的效果组合而成，但整个图可以产生复杂的效果。下面给出了一个示例。

在此示例中，图像应用了<grayscale()>滤镜函数。

#image {
    filter: grayscale(100%);
}

没有滤镜的图像（左）和应用了100%灰度滤镜的相同图像（右）。

下面展示了一个由各个滤镜效果组成的图示例。

一个被过滤的对象的初始示例。

查看此示例的SVG格式

上面示例中使用的滤镜效果在此重复，左列显示每个滤镜原语的参考编号：

1 2 3 4 5 6

<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120"> <desc>产生一个3D光照效果。</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>

下图显示了来自六个滤镜元素的中间图像结果：

源图形

滤镜原语1后

滤镜原语2后

滤镜原语3后

滤镜原语4后

滤镜原语5后

滤镜原语6后

1. 滤镜原语feGaussianBlur接收输入SourceAlpha，即源图形的alpha通道。结果存储在一个名为“blur”的临时缓冲区中。请注意，“blur”作为输入同时用于滤镜原语2和3。

2. 滤镜原语feOffset接收缓冲区“blur”，在x和y方向上将结果向正方向移动，并创建一个新缓冲区“offsetBlur”。效果是生成一个阴影。

3. 滤镜原语feSpecularLighting使用缓冲区“blur”作为表面高度模型，并生成来自单点光源的光照效果。结果存储在缓冲区“specOut”中。

4. 滤镜原语feComposite通过源图形的原始alpha通道屏蔽滤镜原语3的结果，使中间结果不超过原始源图形的尺寸。

5. 滤镜原语feComposite将高光效果与原始源图形合成。

6. 滤镜原语feMerge将两层合成在一起。下层由滤镜原语2的阴影结果组成，上层由滤镜原语5的高光效果结果组成。

2. 模块交互

本规范定义了一组影响应用这些属性的元素的视觉渲染的CSS属性；这些效果是在根据视觉格式模型对元素进行大小调整和定位之后应用的，出自[CSS21]。这些属性的某些值会导致创建包含块，和/或创建堆叠上下文。

合成模型遵循SVG的合成模型[SVG11]：首先应用任何滤镜效果，然后是任何剪裁、遮罩和透明度[CSS3COLOR]。这些效果均在其他CSS效果（如边框）之后应用[CSS3BG]。

本规范中的某些属性和元素定义需要SVG 1.1的实现[SVG11]。不支持SVG的UA不得实现color-interpolation-filters，flood-color， flood-opacity和lighting-color属性，以及filter 元素，feMergeNode元素，传递函数元素 以及滤镜原语元素。

3. 值

本规范遵循CSS属性定义惯例出自[CSS21]。这些规范中未定义的值类型定义在CSS值与单位模块第3级[CSS3VAL]中。

除了其定义中列出的特定属性值之外，本规范中定义的所有属性还接受inherit关键字作为其属性值。为了可读性，未显式重复。

4. 术语

在本规范中使用时，术语具有本节中指定的含义。

滤镜原语, filter-primitive

控制滤镜元素输出的元素集合，特别是：feSpotLight，feBlend，feColorMatrix，feComponentTransfer，feComposite，feConvolveMatrix，feDiffuseLighting，feDisplacementMap，feDropShadow，feFlood， feGaussianBlur，feImage，feMerge，feMorphology，feOffset，feSpecularLighting，feTile，feTurbulence。

透传滤镜

透传滤镜的输出等于滤镜原语的主输入。

5. 图形滤镜：filter 属性

filter属性的描述如下：

<filter-value-list> = [ <filter-function> | <url> ]+

<url>

指向filter元素的滤镜引用。例如：url(commonfilters.svg#filter)。如果滤镜引用的对象不存在或引用的对象不是filter元素，则整个滤镜链被忽略。不会对对象应用任何滤镜。

<filter-function>

见滤镜函数。

none

未应用任何滤镜效果。

为filter属性指定的值非none时，会为绝对定位和固定定位的后代创建包含块，除非应用此属性的元素是当前浏览上下文中的文档根元素。函数列表按提供的顺序应用。

列表中的第一个滤镜函数或filter引用将元素(SourceGraphic)作为输入图像。后续操作将上一个滤镜函数或filter引用的输出作为输入图像。filter元素引用函数可以指定替代输入，但仍然使用上一个输出作为其SourceGraphic。

color-interpolation-filters对滤镜函数没有影响。滤镜函数必须在sRGB颜色空间中运行。

计算值非none时，会创建一个堆叠上下文，类似于CSS中的opacity。所有的元素后代将作为一个整体一起渲染，滤镜效果应用于整个组。

filter属性不会影响目标元素CSS框的几何形状，尽管filter可能会导致在元素的边框框之外进行绘制。

从概念上讲，任何部分的绘制都会受到滤镜操作的影响。这包括应用滤镜的元素的任何内容、背景、边框、文本装饰、轮廓和可见的滚动机制及其后代的这些部分。滤镜操作在元素的本地坐标系中应用。

合成模型遵循SVG合成模型[SVG11]：首先应用滤镜效果，然后是任何剪裁、遮罩和透明度。与SVG一样，应用filter对命中测试没有影响。

filter属性是SVG元素的展示属性。

滤镜如何在固定背景图像上表现？ <https://github.com/w3c/csswg-drafts/issues/238>

6. 滤镜函数

6.1. 支持的滤镜函数

<filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> |    
<grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <sepia()> | <saturate()>

除非另有定义，否则省略的值默认使用用于插值的初始值。

注意：对于某些滤镜函数，省略值的默认值与其初始值不同。为了方便内容创建者，<grayscale()>，<sepia()>和<invert()>的默认值为1（应用100%的效果），而插值的初始值为0（无效果）。

blur() = blur( <length>? )

对输入图像应用高斯模糊。传递的参数定义高斯函数的标准偏差值。该参数以CSS长度指定，但不接受百分比值。该函数的标记等效项在下文中给出。

不允许负值。

省略时的默认值为0px。

插值的初始值为0px。

注意：标准偏差不同于box-shadow的模糊半径。

brightness() = brightness( <number-percentage>? )

对输入图像应用线性乘数，使其看起来更亮或更暗。0%的值将创建一个完全黑色的图像。100%的值不更改输入。其他值是效果的线性乘数。允许超过100%的值，产生更亮的结果。该函数的标记等效项在下文中给出。

不允许负值。

省略时的默认值为1。

插值的初始值为1。

contrast() = contrast( <number-percentage>? )

调整输入图像的对比度。0%的值将创建一个完全灰色的图像。100%的值不更改输入。允许超过100%的值，产生更高对比度的结果。该函数的标记等效项在下文中给出。

不允许负值。

省略时的默认值为1。

插值的初始值为1。

drop-shadow() = drop-shadow( <color>? && <length>{2,3} )

对输入图像应用阴影效果。投影阴影实际上是输入图像的alpha通道的模糊、偏移版本，以特定颜色绘制，组合在图像下方。值的解释方式类似于box-shadow[CSS3BG]，但可选的第3个<length> 值是标准偏差，而不是模糊半径。该函数的标记等效项在下文中给出。

省略值的默认值为缺失长度值设置为0，缺失使用的颜色来自color属性。

插值的初始值为所有长度值设置为0，使用的颜色设置为透明。

注意：不接受扩展值或多重阴影作为本规范的这一层级。

注意：标准偏差不同于box-shadow的模糊半径。

grayscale() = grayscale( <number-percentage>? )

将输入图像转换为灰度。传递的参数定义转换比例。100%的值表示完全灰度化，0%的值不更改输入。0%到100%之间的值是效果的线性乘数。允许超过100%的值，但UA必须将值限制为1。该函数的标记等效项在下文中给出。

不允许负值。

省略时的默认值为1。

插值的初始值为0。

hue-rotate() = hue-rotate( [ <angle> | <zero> ]? )

对输入图像应用色调旋转。传递的参数定义颜色圆周围调整输入样本的度数。0deg的值不更改输入。实现不得规范化此值，以允许超过360deg的动画。该函数的标记等效项在下文中给出。

如果<angle>为零，则可以省略单位标识符。

省略时的默认值为0deg。

插值的初始值为0deg。

invert() = invert( <number-percentage>? )

对输入图像的样本进行反转。传递的参数定义转换比例。100%的值表示完全反转。0%的值不更改输入。0%到100%之间的值是效果的线性乘数。允许超过100%的值，但UA必须将值限制为1。该函数的标记等效项在下文中给出。

不允许负值。

省略时的默认值为1。

插值的初始值为0。

opacity() = opacity( <number-percentage>? )

对输入图像的样本应用透明度。传递的参数定义转换比例。0%的值表示完全透明。100%的值不更改输入。0%到100%之间的值是效果的线性乘数。这等同于将输入图像样本乘以比例值。允许超过100%的值，但UA必须将值限制为1。该函数的标记等效项在下文中给出。

不允许负值。

省略时的默认值为1。

插值的初始值为1。

注意：opacity滤镜函数并不是opacity属性的简写形式。此外，它允许在传递给下一个滤镜之前设置中间滤镜原语结果的透明度。如果最后一个滤镜原语设置为opacity滤镜函数，则opacity属性的值会乘以滤镜函数的值，这可能导致内容更加透明。

saturate() = saturate( <number-percentage>? )

对输入图像进行饱和处理。传递的参数定义转换比例。0%的值表示完全去饱和，100%的值不更改输入。其他值是效果的线性乘数。允许超过100%的值，产生超饱和的结果。该函数的标记等效项在下文中给出。

不允许负值。

省略时的默认值为1。

插值的初始值为1。

sepia() = sepia( <number-percentage>? )

将输入图像转换为褐色。传递的参数定义转换比例。100%的值表示完全褐色化，0%的值不更改输入。0%到100%之间的值是效果的线性乘数。允许超过100%的值，但UA必须将值限制为1。该函数的标记等效项在下文中给出。

不允许负值。

省略时的默认值为1。

插值的初始值为0。

6.2. 滤镜函数的计算值

<filter-function> 中的值按指定计算，但有以下例外情况：

• 省略的值会包括在内，并计算为默认值。

• <drop-shadow()> 从 <color> 的计算值开始，然后计算 <length> 的值。

6.3. 滤镜函数的序列化

要序列化 <filter-function>，请按其各自的语法顺序序列化，避免使用 <calc()> 表达式，并按指定序列化滤镜参数，避免 <calc()> 转换，用单个空格连接空格分隔的标记，并在每个序列化的逗号后加一个空格。

6.4. 滤镜函数的插值

对于 <filter-function> 中值的插值，必须执行以下列表中的第一个匹配条件对应的步骤：

<blur()>

按计算值插值长度值。

<brightness()>

<contrast()>

<grayscale()>

<invert()>

<opacity()>

<saturate()>

<sepia()>

将百分比值转换为数字，0%相对于0，100%相对于1。按计算值插值数值。

<hue-rotate()>

按计算值插值数值。

<drop-shadow()>

按可重复列表 插值阴影列表。

7. SVG 滤镜源: filter 元素

对 filter 元素的描述如下:

<number-optional-number> = <number> <number>?

属性定义:

filterUnits = "userSpaceOnUse | objectBoundingBox"

参见 滤镜区域.

primitiveUnits = "userSpaceOnUse | objectBoundingBox"

指定滤镜基元中的各种长度值以及定义滤镜基元子区域的属性所使用的坐标系。

如果 primitiveUnits 等于 userSpaceOnUse，则滤镜定义中的任何长度值 都表示引用 filter 元素时所采用的当前局部坐标系中的值（即通过 filter 属性引用 filter 元素的元素所使用的用户坐标系）。

如果 primitiveUnits 等于 objectBoundingBox，那么滤镜定义中的任何 长度值都表示引用元素的边界框的分数或百分比 （参见对象边界框单位）。请注意，如果在 <number-optional-number> 值中只指定了一个数字，则该数字会 在执行 primitiveUnits 计算之前展开。

primitiveUnits 的初始值为 userSpaceOnUse。

可动画：是。

x = "<length-percentage>"

参见滤镜区域。

y = "<length-percentage>"

参见滤镜区域。

width = "<length-percentage>"

参见滤镜区域。

height = "<length-percentage>"

参见滤镜区域。

filterRes = "<number-optional-number>"

filterRes 属性已从规范中移除。有关其定义，请参见 SVG 1.1 规范 [SVG11]。

属性从元素的祖先继承到 filter 元素; 属性不会从引用 filter 元素的元素继承。

filter 元素 从不直接渲染；它们的唯一用途是作为可以使用 filter 属性引用的对象。display 属性不适用于 filter 元素；因此，即使将 display 属性设置为 none 以外的值，filter 元素也不会被直接渲染，并且即使 filter 元素或其任何祖先上的 display 属性被设置为 none，filter 元素仍可供引用。

8. 滤镜区域

filter 元素 可以在画布上定义一个给定滤镜效果所应用的 滤镜 区域，并且可以为用于处理任何基于栅格的滤镜基元的任何中间连续色调图像提供分辨率。filter 元素具有以下属性，这些属性共同 定义滤镜区域：

filterUnits

定义属性 x、y、width、height 的坐标系。

如果 filterUnits 等于 userSpaceOnUse，则 x、y、width、height 表示在引用 filter 元素时所采用的当前用户坐标系中的值（即通过 filter 属性引用 filter 元素的元素所使用的用户坐标系）。

如果 filterUnits 等于 objectBoundingBox，那么 x、y、width、height 表示引用元素的边界框的分数或百分比（参见对象边界框单位）。

filterUnits 的初始值为 objectBoundingBox。

可动画：是。

x, y, width, height

这些属性定义画布上此滤镜所应用的一个矩形区域。

这些属性的坐标系取决于属性 filterUnits 的值。

该矩形的边界作为给定 filter 元素中所包含的每个滤镜基元的硬裁剪区域；因此，如果给定滤镜 基元的效果会延伸到矩形边界之外（使用具有非常大的 stdDeviation 的 feGaussianBlur 滤镜基元时有时会发生这种情况），效果的部分 内容将被裁剪。

x 和 y 的初始值为 -10%。

width 和 height 的初始值为 120%。

引用该滤镜的元素的 ng。

可动画：是。

注： filterUnits 的两个可能值（即 objectBoundingBox 和 userSpaceOnUse）都会产生一个滤镜区域，其 坐标系的 X 轴和 Y 轴分别与将应用该滤镜的元素的局部坐标系的 X 轴和 Y 轴平行。

注： 当滤镜区域可以直接映射到设备像素时，实现者有时可以获得更快的性能； 因此，为了在显示设备上获得最佳性能，建议作者定义其区域，使用户代理能够将滤镜区域与背景逐像素对齐。 特别是，为获得最佳滤镜效果性能，应避免旋转或倾斜用户坐标系。

注： 通常有必要提供填充空间，因为滤镜 效果可能会影响给定对象上紧密贴合的边界框稍外侧的部分。 为此，可以为 x、y 提供负百分比值，并为 width、height 提供大于 100% 的百分比值。例如，这就是 滤镜区域的默认值为 x="-10%" y="-10%" width="120%" height="120%" 的原因。

9. 滤镜原语

9.1. 概述

本节描述了可以组合起来以实现特定滤镜 效果的各种滤镜基元。

除非另有说明，否则所有图像滤镜都对预乘的 RGBA 样本进行操作。一些滤镜，例如 feColorMatrix 和 feComponentTransfer，对 非预乘数据进行操作会更自然。在滤镜操作期间，所有颜色值都必须暂时 转换为当前滤镜所要求的颜色乘法形式。

注： 假定所有输入图像都采用预乘 RGBA。用户 代理可以通过使用非预乘数据缓冲来优化性能。

所有栅格效果滤镜操作都接受 1 到 N 个输入 RGBA 图像以及作为参数的附加属性， 并生成单个输出 RGBA 图像。

每个滤镜基元产生的 RGBA 结果都会被钳制到颜色和不透明度 值的允许范围内。因此，例如，给定滤镜基元产生的任何负颜色值或不透明度 值都会被调整为颜色/不透明度零。

特定滤镜基元执行其操作时所使用的色彩空间由给定滤镜基元上的 color-interpolation-filters 属性的值 决定。另一个属性 color-interpolation 决定其他 颜色操作所使用的色彩空间。由于这两个属性具有不同的初始值（color-interpolation-filters 的初始 值为 linearRGB，而 color-interpolation 的初始值为 sRGB），在某些情况下，为了获得特定结果 （例如，在协调渐变插值与滤镜操作时），有必要 在特定元素上显式地将 color-interpolation 设置为 linearRGB，或将 color-interpolation-filters 设置为 sRGB。 请注意，下面的示例均未显式设置 color-interpolation 或 color-interpolation-filters，因此这些示例适用这些属性的初始 值。

有时滤镜 基元会产生未定义的像素。例如，滤镜基元 feOffset 可以将图像向下并 向右移动，从而在顶部和左侧留下未定义的像素。在这些情况下，未定义的像素会被设置为 透明黑色。

为了提供高质量渲染，所有滤镜基元都应在依赖设备的坐标 空间，即 操作坐标空间中进行操作，同时考虑设备像素密度、用户 空间变换和缩放。为了提供与平台无关的对齐，属性和 属性值通常相对于由 primitiveUnits 属性描述的坐标系。用户代理必须将 这些相对属性和属性值缩放到操作坐标空间。

注： 在高分辨率设备上，相对于 primitiveUnits 的属性和属性值通常需要被放大。 在平台资源受限时，用户代理可以降低滤镜基元的分辨率。

注： 来自滤镜基元 feConvolveMatrix 和光源的一些属性或属性值，无法从由 primitiveUnits 属性定义的坐标 空间映射到操作坐标空间。

9.2. 常用滤镜原语属性

以下滤镜基元属性可用于所有滤镜 基元：

属性定义：

x = "<length-percentage>"

限制给定滤镜 基元计算和渲染的子区域的最小 x 坐标。参见滤镜基元子区域。

x 的初始值为 0%。

可动画：是。

y = "<length-percentage>"

限制给定滤镜 基元计算和渲染的子区域的最小 y 坐标。参见滤镜基元子区域。

y 的初始值为 0%。

可动画：是。

width = "<length-percentage>"

限制给定滤镜 基元计算和渲染的子区域的宽度。参见滤镜基元子区域。

负值或零值会禁用给定滤镜基元的效果（即结果为 透明黑色图像）。

width 的初始值为 100%。

可动画：是。

height = "<length-percentage>"

限制给定滤镜 基元计算和渲染的子区域的高度。参见滤镜基元子区域。

负值或零值必须禁用给定滤镜基元的效果（即结果为 透明黑色图像）。

height 的初始值为 100%。

可动画：是。

result = "<filter-primitive-reference>"

<filter-primitive-reference> 是一个 <custom-ident> [CSS3VAL]，并且是分配给此滤镜基元的名称。如果提供了该值，则 处理此滤镜 基元所产生的图形可以由同一 filter 元素中后续滤镜 基元上的 in 属性引用。如果未提供值，则输出 仅在下一个滤镜基元未为其 滤镜基元的 in 属性提供值时，才可作为其隐式输入重新使用。

大多数滤镜基元都以其他滤镜基元作为输入。以下属性代表 所有用于引用其他滤镜基元的输入属性：

属性定义：

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

标识给定滤镜基元的输入。该值可以是六个关键字之一，也可以 是一个与同一 filter 元素中先前某个 result 属性值匹配的字符串。 如果未提供值，并且这是第一个滤镜基元，那么该滤镜基元将使用 SourceGraphic 作为输入。如果未 提供值，并且这是后续滤镜基元， 那么该滤镜基元将使用前一个 滤镜基元的结果作为输入。

如果 result 的值在给定 filter 元素中出现多次，那么对该结果的引用将使用 前面距离最近且其属性 result 具有给定值的滤镜基元。

不允许对结果进行前向引用，并将按未指定结果处理。

对不存在结果的引用将按未指定结果处理。

六个关键字的定义：

SourceGraphic

此关键字表示作为 filter 元素原始输入的图形元素。对于栅格效果滤镜 基元，图形元素将在图像空间中被栅格化到一个初始透明的 RGBA 栅格中。原始图形未触及的像素将保持透明。该 图像被规定以线性 RGBA 像素进行渲染。此图像的 alpha 通道 会捕获 SVG 指定的任何抗锯齿效果。（由于该栅格是线性的，此图像的 alpha 通道 将表示每个像素的精确覆盖百分比。）

SourceAlpha

此关键字表示作为 filter 元素原始输入的图形元素。SourceAlpha 与 SourceGraphic 遵循完全相同的规则，只是仅使用 alpha 通道。输入图像是一个 RGBA 图像，其中 RGB 通道 隐式使用黑色值，而其 alpha 通道与 SourceGraphic 相同。

注： 如果使用此选项，那么某些实现 可能需要将图形元素栅格化，以提取 alpha 通道。

BackgroundImage

此关键字表示调用 filter 元素时，由当前隔离组在滤镜区域 后方定义的背景。参见 isolation 属性 [COMPOSITING-1]。

BackgroundAlpha

与 BackgroundImage 相同，只是仅使用 alpha 通道。参见 SourceAlpha 和 isolation 属性 [COMPOSITING-1]。

FillPaint

此关键字表示滤镜效果目标元素上的 fill 属性的值。FillPaint 图像在概念上具有无限 范围。通常此图像处处不透明，但如果“绘制” 本身具有 alpha，则可能并非如此，例如渐变或图案本身包含透明 或半透明部分的情况。如果 fill 引用绘制服务器，那么绘制服务器的坐标空间就是为被滤镜对象定义的坐标 空间。例如，如果绘制服务器要求使用对象的 objectBoundingBox， 则被滤镜对象的对象边界框定义绘制服务器的参考尺寸。 如果绘制服务器要求使用 userSpaceOnUse，则被滤镜对象的局部坐标系中最近的视口 定义绘制服务器的参考尺寸。

StrokePaint

此关键字表示滤镜效果目标元素上的 stroke 属性的值。StrokePaint 图像在概念上具有 无限范围。更多详细信息请参见上面的 FillPaint。

可动画：是。

9.3. 滤镜原语树

没有滤镜基元输入或只有一个滤镜基元输入的滤镜基元可以链接在一起形成滤镜链。例如，包含两个或更多 <filter-function> 的 <filter-value-list> 的滤镜基元表示就是滤镜链的一个示例。每个 滤镜基元都以前一个滤镜基元的结果作为输入。

<filter id="filter">
  <feColorMatrix type="hueRotate" values="45"/>
  <feOffset dx="10" dy="10"/>
  <feGaussianBlur stdDeviation="3"/>
</filter>

某些滤镜基元可能具有多个滤镜基元输入。通过使用 in 和 result 属性，可以将 多个滤镜基元组合成复杂的滤镜结构。由于滤镜基元存在禁止前向引用的限制， 每个滤镜结构都可以表示为一棵树，即 滤镜基元树。滤镜基元树的根滤镜基元是 filter 元素的滤镜基元子元素中最后续的基元。

滤镜链是一种可能的滤镜结构，也可以表示为滤镜基元树。 因此，下文也将滤镜链称为滤镜基元树。

一个 filter 元素 可以具有一棵或多棵滤镜基元树。其后续滤镜基元是 filter 元素 最后一个滤镜基元子元素的滤镜基元树称为 主滤镜基元树。

只有主滤镜基元树参与滤镜处理。实现可以选择忽略 所有其他可能的滤镜基元树。

如果一个 filter 元素没有滤镜基元树，则应用该滤镜的元素不会被渲染。

<filter id="filter">
  <-- 第一棵 滤镜 基元 树。在 滤镜 处理 中忽略。-->
  <feColorMatrix type="hueRotate" values="45"/>
  <feOffset dx="10" dy="10"/>
  <feGaussianBlur stdDeviation="3"/>
  <-- 主 滤镜 基元 树。-->
  <feFlood flood-color="green" result="flood"/>
  <feComposite operator="in" in="SourceAlpha" in2="flood"/>
</filter>

9.4. 滤镜原语子区域

所有 滤镜原语 都具有 x、y、width 和 height 属性，它们共同定义了 滤镜原语子区域，该区域限制了给定的 滤镜原语 的计算和渲染。x、y、width 和 height 属性根据与其他 滤镜原语 坐标和长度属性相同的规则定义，因此代表由 primitiveUnits 属性在 filter 元素上建立的坐标系中的值。

x、y、width 和 height 默认为所有引用节点的子区域的联合（即最紧密适合的边界框）。如果没有引用节点（例如 feImage 或 feTurbulence），或者一个或多个引用节点是标准输入（其中之一是 SourceGraphic、 SourceAlpha、BackgroundImage、BackgroundAlpha、FillPaint 或 StrokePaint），或者对于 feTile（这是一个特殊情况，因为它的主要功能是将引用的节点在 X 和 Y 方向上复制，从而产生通常更大的结果），默认子区域为 0%, 0%, 100%, 100%，其中百分比是相对于 滤镜区域 的尺寸的，因此默认的 滤镜原语子区域 等于 滤镜区域。

如果 滤镜原语子区域 的宽度或高度为负值或零，则滤镜原语的效果被禁用。

滤镜区域 作为一个硬性裁剪矩形作用于滤镜原语的输入图像。

滤镜原语子区域 作为一个硬性裁剪矩形作用于滤镜原语的结果。

所有的中间离屏都被定义为不超过 滤镜原语子区域 和 滤镜区域 的交集。滤镜区域 和任何滤镜原语子区域应设置为足够大，以容纳任何与 滤镜区域 或滤镜原语子区域部分相交的像素。

feTile 引用了前一个滤镜原语，然后基于引用滤镜原语的 滤镜原语子区域 将图块拼接在一起，以填充其自身的 滤镜原语子区域。

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="flood" x="0" y="0" width="100%" height="100%" primitiveUnits="objectBoundingBox">
       <feFlood x="25%" y="25%" width="50%" height="50%"
          flood-color="green" flood-opacity="0.75"/>
    </filter>
    <filter id="blend" primitiveUnits="objectBoundingBox">
       <feBlend x="25%" y="25%" width="50%" height="50%"
          in2="SourceGraphic" mode="multiply"/>
    </filter>
    <filter id="merge" primitiveUnits="objectBoundingBox">
       <feMerge x="25%" y="25%" width="50%" height="50%">
        <feMergeNode in="SourceGraphic"/>
        <feMergeNode in="FillPaint"/>
       </feMerge>
    </filter>
  </defs>

  <g fill="none" stroke="blue" stroke-width="4">
     <rect width="200" height="200"/>
     <line x2="200" y2="200"/>
     <line x1="200" y2="200"/>
  </g>
  <circle fill="green" filter="url(#flood)" cx="100" cy="100" r="90"/>

  <g transform="translate(200 0)">
    <g fill="none" stroke="blue" stroke-width="4">
       <rect width="200" height="200"/>
       <line x2="200" y2="200"/>
       <line x1="200" y2="200"/>
    </g>
    <circle fill="green" filter="url(#blend)" cx="100" cy="100" r="90"/>
  </g>

  <g transform="translate(0 200)">
    <g fill="none" stroke="blue" stroke-width="4">
       <rect width="200" height="200"/>
       <line x2="200" y2="200"/>
       <line x1="200" y2="200"/>
    </g>
    <circle fill="green" fill-opacity="0.5" filter="url(#merge)" cx="100" cy="100" r="90"/>
  </g>
</svg>

子区域示例

查看此示例为 SVG

在上面的示例中，每个矩形都有一个十字和一个圆形元素。每个圆形元素应用了不同的滤镜，但都使用了相同的 滤镜原语子区域。滤镜输出应该仅限于 滤镜原语子区域，因此你应该看不到圆形本身，只能看到构成 滤镜原语子区域 的矩形。

• 左上角的矩形显示了一个 feFlood，其 flood-opacity: 75%，因此十字应该可以透过中间的绿色矩形可见。

• 左下角的矩形显示了一个 feMerge，它将 SourceGraphic 与 FillPaint 合并。由于圆形具有 fill-opacity="0.5"，因此它也会是半透明的，使得十字可以透过中间的绿色矩形看到。

• 右上角的矩形显示了一个 feBlend，其 mode="multiply"。由于在这种情况下圆形不是透明的，结果是完全不透明的。矩形应该是深绿色的，十字不能透过它看到。

9.5. 滤镜原语 feBlend

此滤镜使用常见的图像处理软件的混合模式将两个对象混合在一起。它执行两个输入图像的逐像素组合。（参见 [COMPOSITING-1]。）

属性定义：

mode = "<blend-mode>"

“Compositing and Blending Level 1” [COMPOSITING-1] 中定义的混合模式之一，其中输入 in 表示源 Cs， 第二个输入 in2 表示背景 Cb。此滤镜基元的输出 Cm 是将 Cs 与 Cb 混合的结果。

mode 的初始值为 normal。

可动画：是。

no-composite = "no-composite"

如果存在 no-composite 属性，则 指定的混合模式不得应用 alpha 合成。有关不带合成的“混合”公式，请参见 混合 [COMPOSITING-1]。 否则，实现必须将 mode 指定的混合模式与 Source Over 合成运算符组合。有关带合成的“混合”公式，请参见 混合 [COMPOSITING-1]。

注： 此属性是对 SVG 1.1 中 feBlend 元素定义的补充。指定 no-composite 时，旨在 避免将输入源与被滤镜对象的背景进行混合时产生“双重合成”效果（例如使用 BackgroundImage 滤镜基元）。对于 大多数用例，作者无需指定 no-composite 属性。

可动画：否。

in2 = "（参见 in 属性）"

混合操作的第二个输入图像。

可动画：是。

normal 混合模式与 alpha 合成相当于 feComposite 滤镜原语上的 operator="over"，与 feMerge 的混合方式匹配，也与 SVG 中所有滤镜效果外的合成使用的 简单 alpha 合成 技术相匹配。

<svg width="5cm" height="5cm" viewBox="0 0 500 500"
 xmlns="http://www.w3.org/2000/svg"> 
<title>示例 feBlend - feBlend 模式示例</title> 
<desc>五个文本字符串与渐变混合，每个文本字符串对应一个 feBlend 模式。</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 isolation="isolate" > 
 <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> 
 </g> 
 </g> 
</svg>

feBlend 示例

查看此示例为 SVG

9.6. 滤镜原语 feColorMatrix

此滤镜应用了矩阵转换:

对输入图形的每个像素的 RGBA 颜色和 alpha 值进行矩阵转换，生成具有新 RGBA 颜色和 alpha 值的结果。

计算是在非预乘的颜色值上进行的。

属性定义:

type = "matrix | saturate | hueRotate | luminanceToAlpha"

指示矩阵操作的类型。关键字 matrix 表示将提供完整的 5x4 矩阵值。其他关键字代表便捷的快捷方式，允许在不指定完整矩阵的情况下执行常用的颜色操作。

初始值 为 type 是 matrix。

可动画: 是。

values = "list of <number>s"

values 的内容取决于属性 type 的值：

• 对于 type="matrix"，values 是一个包含 20 个矩阵值的列表（a00 a01 a02 a03 a04 a10 a11 ... a34），由空格和/或逗号分隔。例如，单位矩阵可以表示为：

  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 是一个单一的实数值。saturate 操作等同于以下矩阵操作：

  $\left[\begin{array}{c}R\text{'}\\ G\text{'}\\ B\text{'}\\ A\text{'}\\ 1\end{array}\right]=\left[\begin{array}{ccccc}0.213+\mathrm{0.787s}& 0.715-\mathrm{0.715s}& 0.072-\mathrm{0.072s}& 0& 0\\ 0.213-\mathrm{0.213s}& 0.715+\mathrm{0.285s}& 0.072-\mathrm{0.072s}& 0& 0\\ 0.213-\mathrm{0.213s}& 0.715-\mathrm{0.715s}& 0.072+\mathrm{0.928s}& 0& 0\\ 0& 0& 0& 1& 0\\ 0& 0& 0& 0& 1\end{array}\right]\cdot \left[\begin{array}{c}R\\ G\\ B\\ A\\ 1\end{array}\right]$

  注意: 一个值为 0 的情况下，生成的滤镜效果将完全去饱和（灰度化），而一个值为 1 则让滤镜输入图像不做任何更改地通过。超出 0..1 范围的值会分别导致滤镜输入图像的欠饱和或过饱和。

  注意: 与以前的规范文本相比，亮度系数的精度有所提高 [Cmam]。

• 对于 type="hueRotate"，values 是一个单一的实数值（以度数表示）。hueRotate 操作等同于以下矩阵操作：

  $\left[\begin{array}{c}R\text{'}\\ G\text{'}\\ B\text{'}\\ A\text{'}\\ 1\end{array}\right]=\left[\begin{array}{ccccc}{a}_{00}& a_{01}& a_{02}& 0& 0\\ a_{10}& a_{11}& a_{12}& 0& 0\\ a_{20}& a_{21}& a_{22}& 0& 0\\ 0& 0& 0& 1& 0\\ 0& 0& 0& 0& 1\end{array}\right]\cdot \left[\begin{array}{c}R\\ G\\ B\\ A\\ 1\end{array}\right]$

  其中 a00, a01 等项的计算方式如下：

  $\left[\begin{array}{ccc}{a}_{00}& a_{01}& a_{02}\\ a_{10}& a_{11}& a_{12}\\ a_{20}& a_{21}& a_{22}\end{array}\right]=\left[\begin{array}{ccc}+0.213& +0.715& +0.072\\ +0.213& +0.715& +0.072\\ +0.213& +0.715& +0.072\end{array}\right]+\cos (\mathit{hueRotate}\mathit{value})\cdot \left[\begin{array}{ccc}+0.787& -0.715& -0.072\\ -0.213& +0.285& -0.072\\ -0.213& -0.715& +0.928\end{array}\right]+\sin (\mathit{hueRotate}\mathit{value})\cdot \left[\begin{array}{ccc}-0.213& -0.715& +0.928\\ +0.143& +0.140& -0.283\\ -0.787& +0.715& +0.072\end{array}\right]$

  因此，色相矩阵的左上角项为：

  $a_{00}=0.2127+\cos (\mathit{hueRotate}\mathit{value})\cdot 0.7873-\sin (\mathit{hueRotate}\mathit{value})\cdot 0.2127$

• 对于 type="luminanceToAlpha"，values 不适用。luminanceToAlpha 操作等同于以下矩阵操作：

  $\left[\begin{array}{c}R\text{'}\\ G\text{'}\\ B\text{'}\\ A\text{'}\\ 1\end{array}\right]=\left[\begin{array}{ccccc}0& 0& 0& 0& 0\\ 0& 0& 0& 0& 0\\ 0& 0& 0& 0& 0\\ 0.2126& 0.7152& 0.0722& 0& 0\\ 0& 0& 0& 0& 1\end{array}\right]\cdot \left[\begin{array}{c}R\\ G\\ B\\ A\\ 1\end{array}\right]$

初始值 对于values

如果 type="matrix"

默认为单位矩阵

如果 type="saturate"

默认为值 1

如果 type="hueRotate"

默认为值 0，结果是单位矩阵。

如果 values 列表中的条目数与 type 所需的条目数不匹配，滤镜原语将作为 透传滤镜 运行。

可动画: 是。

<svg width="8cm" height="5cm" viewBox="0 0 800 500"
     xmlns="http://www.w3.org/2000/svg">
  <title>示例 feColorMatrix - feColorMatrix 操作示例</title>
  <desc>五个文本字符串展示了 feColorMatrix 的效果：
        一个未过滤的文本字符串作为参考，
        使用 feColorMatrix 矩阵选项将其转换为灰度，
        使用 feColorMatrix 饱和选项，
        使用 feColorMatrix hueRotate 选项，
        以及使用 feColorMatrix luminanceToAlpha 选项。</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="0.4"/>
    </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>

feColorMatrix 示例

以 SVG 格式查看此示例

9.7. 滤镜原语 feComponentTransfer

该滤镜原语执行数据的分量重映射，如下所示：

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

每个像素都执行这种操作。它允许诸如亮度调整、对比度调整、色彩平衡或阈值处理等操作。

这些计算是在非预乘颜色值上进行的。

feComponentTransfer 元素的子元素指定了四个通道的传输函数：

• feFuncR - 输入图像红色分量的传输函数

• feFuncG - 输入图像绿色分量的传输函数

• feFuncB - 输入图像蓝色分量的传输函数

• feFuncA - 输入图像 alpha 分量的传输函数

一组 feFuncR、feFuncG、feFuncB、feFuncA 元素也被称为传输函数元素。

以下规则适用于 feComponentTransfer 元素的处理：

• 如果指定了多个同类的传递函数元素， 则使用最后出现的那个。

• 如果有任何传递函数元素未指定，则必须将 feComponentTransfer 按照这些 传递函数元素已被指定且其 type 属性设置为 identity 的方式进行处理。

9.7.1. 传输函数 feFuncR

以下属性是 传输函数元素属性，适用于传输函数元素。

属性定义：

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

指示组件传输函数的类型。函数类型决定了其他属性的适用性。

下列情况下，C 是初始组件（例如，feFuncR），C' 是重新映射后的组件；两者均在 [0,1] 的闭合区间内。

• 对于 identity:

  C' = C

• 对于 table，函数由属性tableValues 中给出的值之间的线性插值定义。该表具有 n+1 个值（即 v₀ 到 v_n），指定 n 个大小均匀的插值区域的起始值和结束值。插值使用以下公式：

  对于 C < 1 的值，找到 k 使得：

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

  结果 C' 为：

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

  如果 C = 1，则：

  C' = vn.

• 对于 discrete，函数由属性 tableValues 给出的阶跃函数定义，提供 n 个值（即 v₀ 到 v_n-1），以确定由 n 个阶跃组成的阶跃函数。阶跃函数通过以下公式定义：

  对于 C < 1 的值，找到 k 使得：

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

  结果 C' 为：

  C' = vk

  如果 C = 1，则：

  C' = vn-1.

• 对于 linear，函数由以下线性方程定义：

  C' = slope * C + intercept

• 对于 gamma，函数由以下指数函数定义：

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

属性 初始值 为 type 是 identity。

可动画：是。

tableValues = "(<number> 列表)"

当 type="table" 时，列表 <number> s v0,v1,...vn，以空格和/或逗号分隔，定义查找表。空列表将导致标识传输函数。

如果未指定此属性，则效果就像提供了一个空列表。

可动画：是。

slope = "<number>"

当 type="linear" 时，线性函数的斜率。

属性 初始值 为 slope 是 1。

可动画：是。

intercept = "<number>"

当 type="linear" 时，线性函数的截距。

属性 初始值 为 intercept 是 0。

可动画：是。

amplitude = "<number>"

当 type="gamma" 时，伽玛函数的振幅。

属性 初始值 为 amplitude 是 1。

可动画：是。

exponent = "<number>"

当 type="gamma" 时，伽玛函数的指数。

属性 初始值 为 exponent 是 1。

可动画：是。

offset = "<number>"

当 type="gamma" 时，伽玛函数的偏移量。

属性 初始值 为 offset 是 0。

可动画：是。

<svg width="8cm" height="4cm" viewBox="0 0 800 400"
     xmlns="http://www.w3.org/2000/svg">
  <title>feComponentTransfer 示例 - feComponentTransfer 操作的示例</title>
  <desc>四个文本字符串，显示 feComponentTransfer 的效果：
        一个作为参考的身份函数，
        使用 feComponentTransfer 表选项，
        使用 feComponentTransfer 线性选项，
        以及使用 feComponentTransfer 伽玛选项。</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>

feComponentTransfer 示例

查看此示例为 SVG

9.7.2. 传递函数 feFuncG

有关属性值的定义，请参见 feFuncR。

9.7.3. 传递函数 feFuncB

有关属性值的定义，请参见 feFuncR。

9.7.4. 传递函数 feFuncA

有关属性值的定义，请参见 feFuncR。

9.8. 滤镜基元 feComposite

此滤镜通过图像空间中逐像素组合两个输入图像，使用其中之一的 Porter-Duff [PORTERDUFF] 合成操作: over，in，atop，out，xor，lighter [COMPOSITING-1]。另外，还可以应用逐分量的arithmetic（算术）操作（结果限制在 [0..1] 范围内）。

arithmetic操作在将feDiffuseLighting和feSpecularLighting滤镜与纹理数据结合时非常有用。同时，它对于实现dissolve（溶解）效果也很有帮助。如果选择了arithmetic操作，则每个结果像素通过以下公式计算:

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

其中:

• i1和i2表示输入图像对应像素的通道值，分别映射到in和in2
• k1, k2, k3和k4表示具有相同名称的属性值

对于此滤镜基元，生成的图像范围可能会扩大，详见描述滤镜基元子区域的部分。

属性定义:

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

要执行的合成操作。除 arithmetic 外，所有 operator 类型都与 [COMPOSITING-1] 中描述的相应操作一致，其中 in 表示源，而 in2 表示目标。arithmetic 运算符如上所述。

operator 的初始值为 over。

可动画：是。

k1 = "<number>"

仅当 operator="arithmetic" 时适用。

k1 的初始值为 0。

可动画：是。

k2 = "<number>"

仅当 operator="arithmetic" 时适用。

k2 的初始值为 0。

可动画：是。

k3 = "<number>"

仅当 operator="arithmetic" 时适用。

k3 的初始值为 0。

可动画：是。

k4 = "<number>"

仅当 operator="arithmetic" 时适用。

k4 的初始值为 0。

可动画：是。

in2 = "（参见 in 属性）"

合成操作的第二个输入图像。

可动画：是。

注意: Compositing and Blending [COMPOSITING-1] 定义了更多的合成关键词。通过切换输入滤镜基元in和in2，可以实现其他关键词的功能。

<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 isolation="isolate">
      <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)" isolation="isolate">
    <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>

feComposite 示例

以 SVG 格式查看此示例

9.9. 滤镜原语 feConvolveMatrix

feConvolveMatrix应用矩阵卷积滤镜效果。卷积将输入图像中的像素与邻近的像素结合，以生成输出图像。通过卷积可以实现各种成像操作，包括模糊、边缘检测、锐化、浮雕和斜角等。

矩阵卷积基于一个n乘m的矩阵（卷积核），该矩阵描述了如何将输入图像中的像素值与邻近的像素值组合起来生成输出的像素值。通过对源像素及其相邻像素应用核矩阵，确定每个输出像素。每个像素的颜色值通过以下基本卷积公式计算得出:

其中“orderX”和“orderY”表示order属性的X和Y值，“targetX”表示targetX属性的值，“targetY”表示targetY属性的值，“kernelMatrix”表示kernelMatrix属性的值，“divisor”表示divisor属性的值，“bias”表示bias属性的值。

在上述公式中，卷积矩阵的值应用时相对于源图像和目标图像旋转180度，以符合许多计算机图形学教材中描述的卷积理论。

举例来说，假设你有一个5像素×5像素的输入图像，其颜色通道之一的色值如下：

并且你定义了一个3×3的卷积核，如下所示：

让我们关注图像中第二行第二列的颜色值（源像素值为120）。假设最简单的情况（输入图像的像素网格与卷积核的像素网格完美对齐），并假设属性 divisor、targetX 和 targetY 的默认值，那么生成的颜色值将为：

因为它们对像素进行操作，矩阵卷积本质上是依赖分辨率的。为了使 feConvolveMatrix 产生与分辨率无关的结果，应该为属性 kernelUnitLength 提供一个明确的值。

kernelUnitLength，与其他属性一起，定义了滤镜效果坐标系中的一个隐式像素网格（即由 primitiveUnits 属性建立的坐标系）。输入图像将被临时重新缩放以使其像素与 kernelUnitLength 匹配。卷积操作将在重采样后的图像上进行，卷积完成后，图像会被重新采样回原始分辨率。

当图像必须重采样以匹配由 kernelUnitLength 定义的坐标系统时，或者在卷积后需要重采样回设备坐标系统时，建议高质量的查看器使用合适的插值技术，例如双线性或双三次插值。根据可用插值的速度，此选择可能会受到 image-rendering 属性设置的影响。请注意，当文档被放大或缩小时，kernelUnitLength 相对于设备像素非常小时，实现可能选择最小化或消除不必要的重采样。

属性定义:

order = "<number-optional-number>"

指示 kernelMatrix 每个维度中的单元格数量。所提供的值 必须是大于零的 <integer>。不是整数的值 将被截断，即向零方向舍入到最接近的整数值。第一个数字 <orderX> 表示矩阵中的列数。第二个数字 <orderY> 表示矩阵中的行数。如果未提供 <orderY>，则其默认值为 <orderX>。

建议仅使用较小的值（例如 3）；较大的值 可能导致非常高的 CPU 开销，并且通常无法产生足以抵消 性能影响的结果。

order 的初始值为 3。

可动画：是。

kernelMatrix = "<list of numbers>"

构成卷积核矩阵的 <number> 列表。 各值由空格字符和/或逗号分隔。列表中的条目数量 必须等于 <orderX> 乘以 <orderY>。

如果 orderX * orderY 的结果不等于值 列表中的条目数量，则滤镜基元充当直通滤镜。

当值列表中的 条目数量无效时应如何处理？<https://github.com/w3c/csswg-drafts/issues/237>

可动画：是。

divisor = "<number>"

将 kernelMatrix 应用于输入图像 得到一个数字后，该数字再除以 divisor，从而得到最终的 目标颜色值。等于矩阵中所有值之和的除数往往会对结果的整体颜色强度 产生均衡作用。如果指定的除数为 0，则改用默认值。

初始值是 kernelMatrix 中所有值之和，但有一个例外： 如果其总和为零，则将除数设为 1。

可动画：是。

bias = "<number>"

将 kernelMatrix 应用于输入图像 得到一个数字并应用 divisor 后，会将 bias 属性添加到每个 分量中。bias 的一种用途，是希望让 .5 灰度值成为 滤镜的零响应时。bias 属性会平移滤镜的范围。这允许表示原本 会被钳制为 0 或 1 的值。

bias 的初始值为 0。

可动画：是。

targetX = "<integer>"

确定卷积矩阵相对于输入图像中给定目标像素在 X 方向上的 定位。矩阵最左侧的列编号为零。该值必须满足：0 <= targetX < orderX。默认情况下，卷积矩阵在 X 方向上相对于输入图像的每个像素 居中（即 targetX = floor ( orderX / 2 )）。

可动画：是。

targetY = "<integer>"

确定卷积矩阵相对于输入图像中给定目标像素在 Y 方向上的 定位。矩阵最上侧的行编号为零。该值必须满足：0 <= targetY < orderY。默认情况下，卷积矩阵在 Y 方向上相对于输入图像的每个像素 居中（即 targetY = floor ( orderY / 2 )）。

可动画：是。

edgeMode = "duplicate | wrap | none"

确定如何根据需要使用颜色值扩展输入图像，以便当卷积核位于输入图像边缘处或附近时 可以应用矩阵运算。

duplicate 表示根据需要沿输入图像的每条 边界扩展输入图像，方法是复制输入图像给定边缘处的颜色值。

原始 N×M 图像，其中 m=M-1 且 n=N-1：

$\left[\begin{array}{ccccc}11& 12& \text{.}\text{.}\text{.}& 1m& 1M\\ 21& 22& \text{.}\text{.}\text{.}& 2m& 2M\\ \text{.}\text{.}\text{.}& \text{.}\text{.}\text{.}& \text{.}\text{.}\text{.}& \text{.}\text{.}\text{.}& \text{.}\text{.}\text{.}\\ n1& n2& \text{.}\text{.}\text{.}& \mathrm{nm}& \mathrm{nM}\\ N1& N2& \text{.}\text{.}\text{.}& \mathrm{Nm}& \mathrm{NM}\end{array}\right]$

使用 duplicate 扩展两个像素：

$\left[\begin{array}{ccccccccc}11& 11& 11& 12& \dots & 1m& 1M& 1M& 1M\\ 11& 11& 11& 12& \dots & 1m& 1M& 1M& 1M\\ 11& 11& 11& 12& \dots & 1m& 1M& 1M& 1M\\ 21& 21& 21& 22& \dots & 2m& 2M& 2M& 2M\\ \dots & \dots & \dots & \dots & \dots & \dots & \dots & \dots & \dots \\ n1& n1& n1& n2& \dots & \mathrm{nm}& \mathrm{nM}& \mathrm{nM}& \mathrm{nM}\\ N1& N1& N1& N2& \dots & \mathrm{Nm}& \mathrm{NM}& \mathrm{NM}& \mathrm{NM}\\ N1& N1& N1& N2& \dots & \mathrm{Nm}& \mathrm{NM}& \mathrm{NM}& \mathrm{NM}\\ N1& N1& N1& N2& \dots & \mathrm{Nm}& \mathrm{NM}& \mathrm{NM}& \mathrm{NM}\end{array}\right]$

wrap 表示通过 获取图像相对边缘的颜色值来扩展输入图像。

使用 wrap 扩展两个像素：

$\left[\begin{array}{ccccccccc}\mathit{nm}& \mathit{nM}& \mathit{n1}& \mathit{n2}& \dots & \mathit{nm}& \mathit{nM}& \mathit{n1}& \mathit{n2}\\ \mathit{Nm}& \mathit{NM}& \mathit{N1}& \mathit{N2}& \dots & \mathit{Nm}& \mathit{NM}& \mathit{N1}& \mathit{N2}\\ \mathrm{1m}& \mathrm{1M}& 11& 12& \dots & \mathrm{1m}& \mathrm{1M}& 11& 12\\ \mathrm{2m}& \mathrm{2M}& 21& 22& \dots & \mathrm{2m}& \mathrm{2M}& 21& 22\\ \dots & \dots & \dots & \dots & \dots & \dots & \dots & \dots & \dots \\ \mathit{nm}& \mathit{nM}& \mathit{n1}& \mathit{n2}& \dots & \mathit{nm}& \mathit{nM}& \mathit{n1}& \mathit{n2}\\ \mathit{Nm}& \mathit{NM}& \mathit{N1}& \mathit{N2}& \dots & \mathit{Nm}& \mathit{NM}& \mathit{N1}& \mathit{N2}\\ \mathrm{1m}& \mathrm{1M}& 11& 12& \dots & \mathrm{1m}& \mathrm{1M}& 11& 12\\ \mathrm{2m}& \mathrm{2M}& 21& 22& \dots & \mathrm{2m}& \mathrm{2M}& 21& 22\end{array}\right]$

值 none 表示使用 R、G、B 和 A 均为零的像素值 扩展输入图像。

edgeMode 的初始值为 duplicate。

可动画：是。

kernelUnitLength = "<number-optional-number>"

第一个数字是 <dx> 值。第二个数字是 <dy> 值。如果未指定 <dy> 值， 则其默认值与 <dx> 相同。它分别指示 kernelMatrix 中连续 列和行之间以当前滤镜单位表示的预期距离（即由属性 primitiveUnits 的值所确定的单位）。 通过为 kernelUnitLength 指定 值，卷积核便会在可缩放的抽象坐标系中定义。如果未指定 kernelUnitLength， 默认值是离屏位图中的一个像素，这是基于像素的坐标 系，因此可能无法缩放。为了在不同显示媒介和 用户代理之间获得一定程度的一致性，有必要为 kernelUnitLength 提供一个值。在某些 实现中，如果临时离屏图像的像素网格与卷积核的像素网格 对齐，则可以获得最一致的结果和最快的性能。

如果指定了负值或零值，则改用默认值。

注： 此属性已弃用，并将被移除。它 无法提供一种可靠的方法来创建与平台无关的结果。本规范的未来版本 将涵盖此用例。

可动画：是。

preserveAlpha = "false | true"

值 false 表示卷积将应用于 所有通道，包括 alpha 通道。在这种情况下，给定像素的 卷积公式中的 ALPHAX,Y 为：

ALPHAX,Y = (
SUM I=0 to [orderY-1] {
SUM J=0 to [orderX-1] {
SOURCE X-targetX+J, Y-targetY+I * kernelMatrixorderX-J-1, orderY-I-1
}
}
) / divisor + bias


值 "true" 表示卷积将仅应用于颜色通道。在这种情况下， 滤镜会暂时对颜色分量值执行反预乘，然后应用卷积核。在这种 情况下，给定像素的 卷积公式中的 ALPHAX,Y 为：

ALPHAX,Y = SOURCEX,Y

preserveAlpha 的初始值为 false。

可动画：是。