<feGaussianBlur>

Baseline Widely available *

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

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

<feGaussianBlur> primitive bộ lọc SVG làm mờ ảnh đầu vào theo mức được chỉ định trong stdDeviation, thuộc tính này xác định đường cong chuông.

Giống như các primitive bộ lọc khác, nó xử lý các thành phần màu trong color space linearRGB theo mặc định. Bạn có thể dùng color-interpolation-filters để dùng sRGB thay thế.

Ngữ cảnh sử dụng

Categories	Filter primitive element
Permitted content	Any number of the following elements, in any order: `<animate>`, `<set>`

SVG

html

<svg
  width="230"
  height="120"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <filter id="blurMe">
    <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>

Kết quả

Ví dụ bóng đổ

SVG

html

<svg
  width="120"
  height="120"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <filter id="dropShadow">
    <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>