filter

Baseline Widely available

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

Thuộc tính filter chỉ định các hiệu ứng bộ lọc được định nghĩa bởi phần tử <filter> sẽ được áp dụng cho phần tử của nó.

Note: Là một thuộc tính trình bày, filter cũng có một thuộc tính CSS tương ứng: filter. Khi cả hai được chỉ định, thuộc tính CSS sẽ được ưu tiên.

Về mặt kỹ thuật, filter có thể được áp dụng cho bất kỳ phần tử nào, nhưng nó chỉ có tác dụng trên các phần tử container không phải phần tử <defs>, tất cả các phần tử đồ họa, và phần tử <use>.

Ví dụ

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <filter id="blur">
    <feGaussianBlur stdDeviation="2" />
  </filter>

  <rect x="10" y="10" width="80" height="80" filter="url(#blur)" />
</svg>