SVG Drop Shadows

<defs> và <filter>

Tất cả các bộ lọc SVG được xác định trong phần tử <defs>. Phần tử <defs> là viết tắt của các định nghĩa và chứa định nghĩa của các phần tử đặc biệt (chẳng hạn như bộ lọc).

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

SVG <feOffset>

ví dụ 1

Phần tử <feOffset> được sử dụng để tạo hiệu ứng đổ bóng. Ý tưởng là lấy một đồ họa SVG (hình ảnh hoặc phần tử) và di chuyển nó một chút trong mặt phẳng xy.

Ví dụ đầu tiên bù đắp một hình chữ nhật (với <feOffset>), sau đó trộn bản gốc lên trên hình ảnh bù (với <feBlend>):

Đây là mã SVG:

Giải thích mã:

• Thuộc tính id của phần tử <filter> xác định tên duy nhất cho bộ lọc
• Thuộc tính bộ lọc của phần tử <rect> liên kết phần tử với bộ lọc "f1"

Ví dụ 2

Bây giờ, hình ảnh bù đắp có thể được làm mờ (với <feGaussianBlur>):

Đây là mã SVG:

Giải thích mã:

• Thuộc tính stdDeversion của phần tử <feGaussianBlur> xác định lượng mờ

Ví dụ 3

Bây giờ, làm cho bóng đen:

Đây là mã SVG:

Giải thích mã:

• Thuộc tính in của phần tử <feOffset> được thay đổi thành "SourceAlpha" sử dụng kênh Alpha để làm mờ thay vì toàn bộ pixel RGBA

Ví dụ 4

Bây giờ, hãy coi bóng đổ như một màu:

Đây là mã SVG:

Giải thích mã:

• Bộ lọc <feColorMatrix> được sử dụng để biến đổi màu sắc trong hình ảnh bù gần với màu đen hơn. Ba giá trị '0,2' trong ma trận đều được nhân với các kênh đỏ, lục và lam. Giảm giá trị của chúng sẽ làm cho các màu gần với màu đen hơn (màu đen là 0)