SVG Filters Intro
SVG Filters Intro （SVG筛选器简介）
Currently, CSS provides a way to apply color effects to images (e.g., lightness, saturation, contrast, etc.) using the filter property. However, CSS filters are limited. The effects created with them are usually applicable to images but limited to color manipulation and blurring. To create powerful effects, we’ll need other functions. Such functions are available in SVG. （目前， CSS提供了一种使用filter属性将颜色效果应用于图像（例如，亮度、饱和度、对比度等）的方法。但是， CSS过滤器是有限的。使用它们创建的效果通常适用于图像，但仅限于颜色处理和模糊。要创建强大的效果，我们还需要其他功能。此类功能在SVG中可用。）
SVG filters add various effects to SVG graphics. （SVG滤镜为SVG图形添加了各种效果。）
Filter Primitives
Filter Primitives （滤镜基元）
In SVG, each <filter> element includes a set of filter elements as its children. Each of such filter primitives performs one basic graphical operation on one or more inputs but outputs only one result. The input is specified in an attribute called in. The result of the operation is specified in the result attribute. The result can then be used as input to other operations. However, if the input is not specified in the in attribute, the result of the previous operation will automatically be used as input. All primitives have the same prefix: fe (a short for “filter effect”). They are named depending on what an element is or does. E.g., the primitive applying a Gaussian Blur effect to the source graphic is called feGaussianBlur.
Besides using the result of other primitives as input, a filter primitive can also accept other inputs such as SourceGraphic (an element to which the whole filter is applied) and SourceAlpha (the same as SourceGraphic, but this graphic contains only the element’s alpha channel). （除了使用其他基元的结果作为输入之外，过滤器基元还可以接受其他输入，例如SourceGraphic （整个过滤器应用的元素）和SourceAlpha （与SourceGraphic相同，但此图形仅包含元素的alpha通道）。）
Now there are 17 filter primitives that are defined in the SVG Filter specification. （现在， SVG过滤器规范中定义了17个过滤器基元。）
Filter Elements in SVG
Filter Elements in SVG （SVG中的滤镜元素）
| Attribute | Description |
|---|---|
| <feBlend> | Blends two objects together using generally used imaging software blending modes. |
| <feColorMatrix> | Applies a matrix transformation. |
| <feComponentTransfer> | Performs component-wise remapping of data. |
| <feComposite> | Performs combination of two input images pixel-wise in image space. |
| <feConvolveMatrix> | Applies a matrix convolution filter effect. |
| <feDiffuseLighting> | Lights an image with the use of the alpha channel as a bump map. |
| <feDisplacementMap> | Uses pixels values from the image from in2 to displace the image from the in attribute. |
| <feFlood> | Creates a rectangle which is filled with the opacity and color values from the flood-opacity and flood-color properties. |
| <feGaussianBlur> | Applies a Gaussian blur on the input image. |
| <feImage> | Refers to a graphic external to this element, that is loaded or rendered into an RGBA raster becoming the result of the primitive. |
| <feMerge> | Blends input image layers. |
| <feMorphology> | Performs “thinning” or “fattening”. |
| <feOffset> | Offsets the input image. |
| <feSpecularLighting> | Lights a source graphic with the use of the alpha channel as a bump map. |
| <feTile> | Fills a target rectangle with a repeated pattern of an input image. |
| <feTurbulence> | Creates an image with the Perlin turbulence function. |
| <feDistantLight> | Specifies a distant light source which can be used inside a lighting filter primitive. |
| <fePointLight» | Specifies a light source that allows creating a point light effect. |
| <feSpotLight> | Specifies a light source that allows creating a spotlight effect. |