SVG 模糊效果
SVG <feGaussianBlur>
The <feGaussianBlur> filter is used to create blur effects
这是 SVG 代码
示例
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="f1" x="0" y="0" xmlns="http://www.w3.org/2000/svg">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" fill="yellow" filter="url(#f1)" />
</svg>
自己动手试一试 »
代码解释
- 元素
<filter>的id属性定义了滤镜的唯一名称。 - The blur effect is defined with the
<feGaussianBlur>element - The
in="SourceGraphic"part defines that the effect is created for the entire element - The
stdDeviationattribute defines the amount of the blur - <rect> 元素的
filter属性将元素指向 "f1" 滤镜。
SVG <feGaussianBlur>
The stdDeviation attribute defines the amount of the blur. A higher value results in a more blurry image
这是 SVG 代码
示例
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="f2" x="0" y="0" xmlns="http://www.w3.org/2000/svg">
<feGaussianBlur in="SourceGraphic" stdDeviation="55" />
</filter>
</defs>
<rect width="90" height="90" fill="yellow" filter="url(#f2)" />
</svg>
自己动手试一试 »
