Sekiranya anda ingin memotong gambar dengan bantuan SVG, disyorkan penggunaan jalur klip harta CSS. Skrip berikut mencetuskan halangan besar: SVG dapat disimpan dengan bantuan Illustrator, anda boleh menentukan (relatif atau mutlak) URL SVG (Chrome menyokong sehingga kini hanya sebaris SVG) dan garis leher juga responsif sepenuhnya.
Mula-mula anda membuat topeng kliping dalam Adobe Illustrator dan mengeksport SVG dengan tetapan berikut:
Nisbah aspek SVG dan gambar harus sama. Akhirnya, SVG luaran dirujuk dalam gambar, misalnya dalam atribut klip data:
1e4823ee95525ce0e04bb693c48e0e35
Sekarang anda mengintegrasikan skrip berikut:
1e4823ee95525ce0e04bb693c48e0e35
Hasilnya ialah:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.