高斯模糊滤镜

前端教程SVG

<feGaussianBlur> 高斯模糊滤镜对输入图像进行高斯模糊。

基本语法

<filter id="blurMe">
  <feGaussianBlur stdDeviation="5" />
</filter>

• stdDeviation="value | value_h value_v" 即 standard deviation，定义了模糊程度
  • 值是1个数值，或2个数值(以空格或逗号间隔的)，数值都必须非负
    • 如果是1个数值，则在水平和垂直上模糊程度一致
    • 如果是2个数值，第一个表示水平方向的模糊程度，第二个表示垂直方向的模糊程度
  • 默认 0（没有模糊效果）

示例

通过下面的 codpen 来了解高斯模糊：

新窗口打开