Jika Anda ingin memotong gambar dengan bantuan SVG, disarankan untuk menggunakan jalur klip properti CSS. Skrip berikut memicu hambatan bergelombang: SVG dapat disimpan dengan bantuan Illustrator, Anda dapat menentukan URL (relatif atau absolut) dari SVG (Chrome mendukung hingga sekarang hanya SVG sebaris) dan garis leher juga sepenuhnya responsif.
Pertama Anda membuat topeng kliping di Adobe Illustrator dan mengekspor SVG dengan pengaturan berikut::
Rasio aspek SVG dan gambar harus sama. Akhirnya, SVG eksternal direferensikan dalam gambar, misalnya dalam atribut klip data:
1e4823ee95525ce0e04bb693c48e0e35
Sekarang Anda mengintegrasikan skrip berikut::
1e4823ee95525ce0e04bb693c48e0e35
Hasilnya adalah:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.