过滤器

虽然必须在 IE 上使用 fakeSMIL 库来获得相同的结果，但大多数过滤器属性都可以通过 <animate> 元素进行动画制作。SMIL 动画（<animate> 元素）将被弃用，以支持新的 Web 动画规范 - 截至 2016 年中期，该规范的支持非常有限。

Filter 元素的子元素 - 滤镜基元 - 具有两个可选属性，用于指定执行颜色插值计算的颜色空间：颜色插值和颜色插值滤镜。前者的默认值是 sRGB，后者的默认值是 linearRGB。反转色彩空间的操作（通过 feColorMatrix 或 feComponentTransfer）可能会导致非直观的结果 - 对于那些习惯于 CSS sRGB 色彩空间的人来说。例如，线性 RGB 中的灰度图像的颜色反转将导致明显向更白色调的偏移。这可以通过将基元的值设置为 sRGB 来纠正。这些属性可以在各个过滤器基元上设置，也可以从过滤器元素本身继承。

如果未指定其他输入，但需要一个输入，则过滤器中的第一个过滤器基元将使用引用元素的栅格化（位图）版本作为其输入。期望输入的后续滤波器基元将把前一个滤波器基元的结果作为输入。

在复杂的过滤器中，如果隐含的话，很难跟踪（和调试）输入和输出; 优良作法是明确声明每个基元的输入和输出。

SVG 滤波器基元可以通俗地分为输入，变换，灯光效果和组合

输入：

feFlood：生成一个色域

feTurbulence：产生各种各样的噪音效果

feImage：从外部图像引用，数据 URI 或对象引用生成图像（截至 12 月中旬，Firefox 不支持对象引用）

转换：

feColorMatrix：将 RBGA 像素的输入值转换为输出值

feComponentTransfer：调整单个颜色通道的颜色曲线

feConvolveMatrix：用从相对于当前像素的区域中的像素值计算的新像素替换每个像素）

feGaussianBlur：用像素周围区域中像素的加权平均值替换当前像素

feDisplacementMap：根据另一个输入图形中的 R，G 或 B 值移动每个像素的当前位置。

feMorphology：用从该像素周围的矩形区域中的所有像素的最大值或最小值计算的新像素替换每个像素。

feOffset：将输入从当前位置移开

照明效果：

feSpecularLighting：提供闪亮的2D 或伪 3D 照明效果

feDiffuseLighting：提供遮罩2D 或伪 3D 照明效果

feDistantLight：为镜面反射或漫射照明提供远距离光源

feSpotLight：为镜面反射或漫反射照明提供圆锥截面光源

fePointLight：为镜面反射或漫反射照明提供点光源

组合：

feMerge：从多个输入创建一个简单的复合（包括先前的滤波器输入）

feBlend：使用混合规则混合多个输入

feComposite：使用集合组合规则组合多个输入，同时考虑 alpha 值。

feTile：tile 输入以创建重复模式

其他说明

虽然 SVG 是一种矢量图形技术，但重要的是要强调 SVG 滤波器对所有输入（包括 SVG 形状） 执行像素级操作，并以指定的分辨率生成光栅化（位图）输出。在以正常屏幕分辨率过滤的普通 SVG 曲线上应用 10x 比例变换（例如）将产生像素化边缘，因为原始图形的抗锯齿已经被滤波器转换为像素并按比例放大。 （目前还不清楚这是符合规范还是仅限于当前的实施）

请记住，在编写过滤器时，SVG 是 XML，因此必须关闭所有标记，并且需要显式指定许多属性和属性，否则将不执行过滤器。

永远不会直接渲染滤镜元素。仅使用应用过滤器的元素上的 filter 属性引用它。请注意，display 属性不适用于 filter 元素，即使 display 属性设置为 none 以外的值，也不会直接呈现元素。相反，即使 filterelement 或其任何祖先的 display 属性设置为 none，过滤元素也可用于引用。

可以通过 CSS 过滤器引用 SVG 过滤器，尽管截至 2016 年中，通过此机制仅支持基元的子集，并且 Microsoft 浏览器不支持此机制。