<filter>

Baseline Widely available *

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

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

Phần tử SVG <filter> xác định một hiệu ứng bộ lọc tùy chỉnh bằng cách nhóm các primitive bộ lọc nguyên tử. Bản thân nó không bao giờ được hiển thị, nhưng phải được dùng bởi thuộc tính filter trên các phần tử SVG, hoặc thuộc tính filter CSS cho các phần tử SVG/HTML.

Ngữ cảnh sử dụng

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

Thuộc tính

Note: Với <filter>, các thuộc tính x và y mặc định là -10%, còn các thuộc tính width và height mặc định là 120%. Điều này là do nhiều hiệu ứng bộ lọc, chẳng hạn như <feGaussianBlur>, mở rộng ra ngoài ranh giới của phần tử đang được lọc. Kích thước mặc định đảm bảo hiệu ứng bộ lọc không bị cắt xén.

SVG

html

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