Jika Anda ingin memotong gambar menggunakan SVG, disarankan untuk menggunakan properti CSS `clip-path` . Skrip berikut menghilangkan beberapa kendala: SVG dapat disimpan menggunakan Illustrator, Anda dapat menentukan URL (relatif atau absolut) dari SVG (Chrome saat ini hanya mendukung SVG inline secara native), dan hasil potongannya juga sepenuhnya responsif.
Pertama Anda membuat topeng kliping di Adobe Illustrator dan mengekspor SVG dengan pengaturan berikut::
Rasio aspek SVG dan gambar harus sama. Terakhir, SVG eksternal dirujuk dalam gambar, misalnya, dalam atribut `data-clip` .:
1e4823ee95525ce0e04bb693c48e0e35
Sekarang Anda mengintegrasikan skrip berikut::
1e4823ee95525ce0e04bb693c48e0e35
Hasilnya adalah:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.