SVG Blur Effects
SVG Blur Effects （SVG模糊效果）
Description of SVG filters
Description of SVG filters （SVG过滤器的描述）
All SVG filters are defined inside a <defs> element. The <defs> element is a short form of definitions. It contains a definition of specific elements like filters.
The <filter> element defines an SVG filter. This element has an id attribute (required) identifying the filter. The <filter> element is not rendered directly. Its only usage is the case when it can be referenced with the filter attribute in SVG, and the url() function in CSS.
Each <filter> element contains different filter elements as its children. Such filter primitives perform one essential graphical operation on one or more inputs and output only one result. Besides using the result of other primitives as input, a filter primitive can also accept other inputs such as SourceGraphic and SourceAlpha.
All filter elements contain the fe prefix, which stands for “filter effect”. （所有滤镜元素都包含fe前缀，代表“滤镜效果”。）
Now there are 17 filter primitives that are defined in the SVG Filter specification. （现在， SVG过滤器规范中定义了17个过滤器基元。）
In our example, we use the <feGaussianBlur> element to create a blur effect.
Example of creating a blur effect:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="150" height="150">
<defs>
<filter id="filter" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="20" />
</filter>
</defs>
<rect width="110" height="110" stroke="green" stroke-width="5" fill="lightblue" filter="url(#filter)" />
Sorry, your browser doesn't support inline SVG.
（抱歉，您的浏览器不支持内联SVG。）
</svg>
</body>
</html>
Code explanation: （代码说明：）
The <filter> element’s id attribute specifies a unique name for the filter.
The blur effect is specified with the <feGaussianBlur> element.
The in=“SourceGraphic” part specifies that the effect is created for the whole element. （- in = “SourceGraphic"部分指定为整个元素创建效果。）
The stdDeviation attribute specifies the amount of the blur. （- stdDeviation属性指定模糊量。）
The <rect> element’s filter attribute links the element to the “filter” filter.