32: Bộ lọc SVG trên các phần tử SVG và HTML - Thủ thuật CSS

Có lẽ bạn đã nghe nói về bộ lọc CSS? Bạn có thể áp dụng chúng cho bất kỳ phần tử nào từ CSS, như:

.apply-css-filter ( -webkit-filter: grayscale(0.5); filter: grayscale(0.5); )

Bạn thậm chí có thể áp dụng điều đó cho một phần tử HTML hoặc một phần tử SVG.

Nhưng cũng có các bộ lọc bạn có thể xác định trong SVG và có nhiều tùy chọn hơn khi bạn thực hiện. Đây là một định nghĩa ví dụ:

Sau đó, bạn có thể áp dụng nó cho một phần tử ngay trong SVG như:

Hoặc, từ CSS bằng cách tham chiếu ID tương tự:

.apply-svg-filter ( -webkit-filter: url(#pictureFilter); filter: url(#pictureFilter); )

Có rất nhiều bộ lọc SVG. Những cái quen thuộc như mờ và những cái lạ áp dụng hiệu ứng họa sĩ. Đây là thông số kỹ thuật.