SVG 模糊效果
SVG <feGaussianBlur>
<feGaussianBlur> 滤镜用于创建模糊效果。
以下是 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属性为滤镜定义一个唯一的名称。- 模糊效果由
<feGaussianBlur>元素定义。 in="SourceGraphic"部分定义了效果是为整个元素创建的。stdDeviation属性定义了模糊的程度。<rect>元素的filter属性将元素指向 "f1" 滤镜。
SVG <feGaussianBlur>
stdDeviation 属性定义了模糊的程度。值越大，图像越模糊。
以下是 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>
亲自试一试 »
