View in EnglishAlways switch to English

<feGaussianBlur>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2018年10月.

* Some parts of this feature may have varying levels of support.

<feGaussianBlur>SVG 滤镜原语根据stdDeviation 指定的值（其定义了模糊的钟形曲线）对输入图像进行模糊处理。

使用上下文

类别	滤镜元素
允许的内容	任意数量、任意顺序的下列元素： `<animate>`、`<set>`

属性

DOM 接口

该元素实现了SVGFEGaussianBlurElement 接口。

示例

基础示例

SVG

html

<svg  width="230"  height="120"  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink">  <filter>    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />  </filter>  <circle cx="60" cy="60" r="50" fill="green" />  <circle cx="170" cy="60" r="50" fill="green" filter="url(#blurMe)" /></svg>

结果

阴影示例

SVG

html

<svg  width="120"  height="120"  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink">  <filter>    <feGaussianBlur in="SourceAlpha" stdDeviation="3" />    <feOffset dx="2" dy="4" />    <feMerge>      <feMergeNode />      <feMergeNode in="SourceGraphic" />    </feMerge>  </filter>  <circle cx="60" cy="60" r="50" fill="green" filter="url(#dropShadow)" /></svg>