滤镜效果模块 第一级

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 元素的元素的用户坐标系统）。

如果 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 元素也不会直接渲染，即使 display 属性在 filter 元素或其任何祖先上设置为 none。

8. 滤镜区域

filter 元素可以在画布上定义一个滤镜区域，滤镜效果将应用于该区域，并为任何基于光栅的 滤镜原语 提供分辨率。在 filter 元素中，有以下属性共同定义了滤镜区域:

filterUnits

定义了 x，y，width，height 属性的坐标系统。

如果 filterUnits 等于 userSpaceOnUse，那么 x，y，width，height 表示在引用 filter 元素时用户坐标系中的值（即引用 filter 元素的元素的用户坐标系）。

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

filterUnits 的初始值是 objectBoundingBox。

可动画: 是。

x, y, width, height

这些属性在画布上定义了该滤镜应用的矩形区域。

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

此矩形的边界充当了每个 滤镜原语 的硬剪裁区域；因此，如果给定滤镜原语的效果超出了矩形的边界（这在使用非常大的 feGaussianBlur 滤镜原语时会发生），部分效果将被剪裁。

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

width 和 height 的初始值为 120%。

ng of the element which referenced the filter.

可动画: 是。

注意: filterUnits 的两种可能值 (即 objectBoundingBox 和 userSpaceOnUse) 均会生成一个其坐标系统的 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 坐标。参见 滤镜原语子区域。

初始值 为 0%。

可动画: 是。

y = "<length-percentage>"

用于限制计算和渲染给定 滤镜原语 的子区域的最小 y 坐标。参见 滤镜原语子区域。

初始值 为 0%。

可动画: 是。

width = "<length-percentage>"

用于限制计算和渲染给定 滤镜原语 的子区域的宽度。参见 滤镜原语子区域。

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

初始值 为 100%。

可动画: 是。

height = "<length-percentage>"

用于限制计算和渲染给定 滤镜原语 的子区域的高度。参见 滤镜原语子区域。

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

初始值 为 100%。

可动画: 是。

result = "<filter-primitive-reference>"

<filter-primitive-reference> 是一个 <custom-ident> [CSS3VAL]，是此 滤镜原语 的指定名称。如果提供了值，则通过处理此 滤镜原语 生成的图形可以通过同一 in 属性在后续滤镜原语中引用。如果未提供值，则输出将仅可作为下一个 滤镜原语 的隐式输入使用，前提是该 滤镜原语 未为其 in 属性提供值。

大多数滤镜原语使用其他滤镜原语作为输入。以下属性代表所有输入属性，用于引用其他滤镜原语：

属性定义：

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

指定给定滤镜原语的输入。该值可以是六个关键字之一，也可以是一个字符串，该字符串与同一 result 属性的值相匹配。如果未提供值，并且这是第一个 滤镜原语，则此 滤镜原语 将使用 SourceGraphic 作为其输入。如果未提供值，并且这是后续的 滤镜原语， 则此 滤镜原语 将使用先前 滤镜原语 的结果作为其输入。

如果 result 的值在给定的 滤镜 元素中出现多次，则对该结果的引用将使用前面最近的具有相应 result 属性值的 滤镜原语。

不允许对结果的前向引用，并且会被视为未指定任何结果。

对不存在结果的引用将被视为未指定任何结果。

六个关键字的定义如下：

SourceGraphic

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

SourceAlpha

此关键字表示原始输入到 滤镜 元素的图形元素。SourceAlpha 与 SourceGraphic 的所有规则相同，但仅使用 alpha 通道。输入图像是一个 RGBA 图像，其 RGB 通道为隐式黑色，但其 alpha 通道与 SourceGraphic 相同。

注意: 如果使用此选项，则某些实现可能需要光栅化图形元素以提取 alpha 通道。

BackgroundImage

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

BackgroundAlpha

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

FillPaint

此关键字表示目标元素上 fill 属性的值。FillPaint 图像的概念上是无限的。通常此图像在各处都不透明，但如果“油漆”本身具有 alpha，则可能不是这种情况，例如在渐变或图案本身包含透明或半透明部分的情况下。如果 fill 引用了一个油漆服务器，则油漆服务器的坐标空间由过滤对象定义。例如，如果油漆服务器需要使用对象的 objectBoundingBox，则过滤对象的对象边界框定义了油漆服务器的参考大小。如果油漆服务器需要使用 userSpaceOnUse，则滤镜对象的 本地坐标系统 中最近的视口定义了油漆服务器的参考大小。

StrokePaint

此关键字表示目标元素上 stroke 属性的值。StrokePaint 图像的概念上是无限的。参见上文 FillPaint 了解更多细节。

可动画: 是。

9.3. 滤镜原语树

没有或只有一个滤镜原语输入的滤镜原语可以链接在一起，形成一个滤镜链。例如，表示一个包含两个或更多 <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>"

一种由“合成与混合 1 级”定义的混合模式，[COMPOSITING-1]，其中输入 in 表示源 Cs，第二个输入 in2 表示 背景 Cb。此滤镜原语的输出 Cm 是 Cs 与 Cb 混合的结果。

初始值 为 normal。

可动画：是。

no-composite = "no-composite"

如果存在 no-composite 属性，则指定的混合模式不应应用 alpha 合成。参见 混合 [COMPOSITING-1]，了解无合成的“混合”公式。否则，必须将由 mode 指定的混合模式与 源覆盖 合成操作符相结合。参见 混合 [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 元素的处理：

• 如果指定了多个相同种类的 传输函数元素，则应使用最后一个出现的。

• 如果任何 传输函数元素 未指定，则应按这些元素设置为其 type 属性为 identity 来处理 feComponentTransfer。

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操作如上所述。

初始值为over。

可动画: 是。

k1 = "<number>"

仅在operator="arithmetic"时适用。

初始值为0。

可动画: 是。

k2 = "<number>"

仅在operator="arithmetic"时适用。

初始值为0。

可动画: 是。

k3 = "<number>"

仅在operator="arithmetic"时适用。

初始值为0。

可动画: 是。

k4 = "<number>"

仅在operator="arithmetic"时适用。

初始值为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 的结果与值列表中的条目数不相等，则滤镜原语将充当 通过滤镜。

可动画: 是。

divisor = "<number>"

在将 kernelMatrix 应用于输入图像并生成数字后，将该数字除以 divisor 以生成最终的目标颜色值。如果指定的除数为 0，则将使用默认值。

divisor 的初始值是 kernelMatrix 所有值的总和。如果总和为零，则除数设置为 1。

可动画: 是。

bias = "<number>"

在将 kernelMatrix 应用于输入图像并生成一个数值后，应用 divisor，然后将 bias 属性添加到每个组件中。

一个使用 bias 的应用场景是当希望将 0.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-by-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> 值相同。表示当前滤镜单位中的预期距离 （即由 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。

可动画: 是。