Hiệu ứng mờ SVG

<defs> và <filter>

Tất cả các bộ lọc SVG đều ở <defs> được định nghĩa trong phần tử.<defs> Phần tử là viết tắt của định nghĩa (definitions), bao gồm các định nghĩa cho các phần tử đặc biệt (ví dụ như bộ lọc).

<filter> Phần tử được sử dụng để định nghĩa bộ lọc SVG.<filter> Phần tử có thuộc tính id bắt buộc, được sử dụng để xác định bộ lọc. Sau đó, đồ họa sẽ chỉ đến bộ lọc cần sử dụng.

SVG <feGaussianBlur>

Ví dụ 1

<feGaussianBlur> Phần tử được sử dụng để tạo hiệu ứng mờ:

Đây là mã SVG:

<svg height="110" width="110">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

Thử ngay

Giải thích mã:

• Thuộc tính id của phần tử <filter> định nghĩa tên duy nhất của bộ lọc
• <feGaussianBlur> được định nghĩa hiệu ứng mờ
• in="SourceGraphic" được định nghĩa là hiệu ứng tạo ra cho toàn bộ phần tử
• Thuộc tính stdDeviation xác định lượng mờ
• Thuộc tính filter của phần tử <rect> liên kết phần tử này với bộ lọc "f1"