Mờ Gauss SVG

Phải định nghĩa hiệu ứng lọc SVG trong thẻ <defs>.

Mờ Gauss (Gaussian Blur)

Thẻ <filter> dùng để định nghĩa hiệu ứng lọc SVG. Thẻ <filter> sử dụng thuộc tính id bắt buộc để định nghĩa hiệu ứng lọc nào được áp dụng cho hình ảnh?

Thẻ <filter> phải được nhúng trong thẻ <defs>. Thẻ <defs> là viết tắt của definitions, nó cho phép định nghĩa các yếu tố đặc biệt như hiệu ứng lọc.

Vui lòng sao chép mã dưới đây vào sổ ghi chú, sau đó lưu tệp dưới tên "filter1.svg". Đặt tệp này vào thư mục web của bạn:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

Giải thích mã:

  • Thuộc tính id của thẻ <filter> có thể định nghĩa một tên duy nhất cho hiệu ứng lọc (cùng một hiệu ứng lọc có thể được sử dụng bởi nhiều yếu tố trong tài liệu)
  • Thuộc tính filter:url dùng để liên kết yếu tố với hiệu ứng lọc. Khi liên kết hiệu ứng lọc id, phải sử dụng ký tự #
  • Hiệu ứng lọc được định nghĩa qua thẻ <feGaussianBlur>. Hậu tố fe có thể được sử dụng cho tất cả các hiệu ứng lọc
  • Thuộc tính stdDeviation của thẻ <feGaussianBlur> có thể định nghĩa mức độ mờ
  • Phần này in="SourceGraphic" định nghĩa hiệu ứng được tạo ra bởi toàn bộ hình ảnh

Xem ví dụ

Ví dụ khác về giá trị stdDeviation khác nhau

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

Xem ví dụ