Nếu bạn muốn cắt một hình ảnh sử dụng SVG, bạn nên sử dụng thuộc tính CSS `clip-path` . Đoạn mã sau đây giúp loại bỏ một số trở ngại: SVG có thể được lưu bằng Illustrator, bạn có thể chỉ định URL (tương đối hoặc tuyệt đối) của SVG (hiện tại Chrome chỉ hỗ trợ SVG nội tuyến), và hình ảnh được cắt cũng hoàn toàn tương thích với mọi kích thước màn hình.
Đầu tiên, bạn tạo mặt nạ cắt trong Adobe Illustrator và xuất SVG với các cài đặt sau:
Tỷ lệ khung hình của SVG và hình ảnh phải giống nhau. Cuối cùng, SVG bên ngoài được tham chiếu trong hình ảnh, ví dụ, trong thuộc tính `data-clip` .:
1e4823ee95525ce0e04bb693c48e0e35
Bây giờ bạn tích hợp tập lệnh sau:
1e4823ee95525ce0e04bb693c48e0e35
Kết quả là:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.