Sự kết hợp giữa ảnh SVG với CSS clip-path

Đầu tiên mình xin phép nêu lên một số ví dụ để các bạn có thể hình dung được SVG với clip-path có liên quan gì với nhau nhé.

HOLA

Tiếp nè

Với kỹ thuật Clipping mình có thể qui định được vùng hiển thị của một bức ảnh với các hình thù mà mình thích.

Bức ảnh này sử dụng ảnh một con mòe làm vùng hiển thị cho background biển bên dưới.

Một số ví dụ cụ thể bạn có thể tham khảo tại link: http://bennettfeely.com/clippy/

Clippy đã hỗ trợ bạn khá nhiều shape có sẵn, trường hợp bạn muốn sử dụng một shape của riêng bạn giống ví dụ con mòe ở trên thì bạn sẽ cần phải tự tạo cho mình một ảnh con mèo bằng SVG nhé.

Để có thể tạo được các ảnh SVG như mong muốn, bạn có thể sử dụng một số tools hỗ trợ xử lý SVG như Inkscape, https://www.vectorizer.io/, http://editor.method.ac/

Tóm lại: với kỹ thuật này thay vì phải hiển thị các bức ảnh hình vuông hay chữ nhật nhàm chán, thì chúng ta có thể hiển thị chúng theo bất kỳ hình dạng nào mà chúng ta thích nhé.

! Lưu ý: Hầu hết các browser hiện đại đều hỗ trợ kỹ thuật clipping này (nhưng không phải tất cả nhẻ các bạn thân yêu)

Nếu các bạn có bất kỳ vấn đề gì thắc mắc về kỹ thuật này, thì cứ comment bên dưới mình sẽ xem xét và giải quyết cùng các bạn nhé.

Xin lỗi các bạn vì bài viết sơ sài nhé.