Jika anda ingin memotong imej menggunakan SVG, adalah disyorkan untuk menggunakan sifat CSS `clip-path` . Skrip berikut akan mengalih keluar beberapa halangan: SVG boleh disimpan menggunakan Illustrator, anda boleh menentukan URL (relatif atau mutlak) SVG (Chrome pada masa ini hanya menyokong SVG sebaris secara natif), dan potongan tersebut juga responsif sepenuhnya.
Mula-mula anda membuat topeng kliping dalam Adobe Illustrator dan mengeksport SVG dengan tetapan berikut:
Nisbah aspek SVG dan imej hendaklah sama. Akhir sekali, SVG luaran dirujuk dalam imej, contohnya, dalam atribut `data-clip` .:
1e4823ee95525ce0e04bb693c48e0e35
Sekarang anda mengintegrasikan skrip berikut:
1e4823ee95525ce0e04bb693c48e0e35
Hasilnya ialah:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.