Yen sampeyan pengin ngethok gambar nganggo SVG, disaranake nggunakake properti CSS `clip-path` . Skrip ing ngisor iki mbusak sawetara alangan: SVG bisa disimpen nganggo Illustrator, sampeyan bisa nemtokake URL (relatif utawa absolut) saka SVG (Chrome saiki mung ndhukung SVG inline), lan potongan kasebut uga responsif banget.
Pisanan sampeyan nggawe topeng kliping ing Adobe Illustrator lan ekspor SVG kanthi setelan ing ngisor iki:
Rasio aspek SVG lan gambar kudu padha. Pungkasan, SVG eksternal dirujuk ing gambar, contone, ing atribut `data-clip` .:
1e4823ee95525ce0e04bb693c48e0e35
Saiki sampeyan nggabungake skrip ing ngisor iki:
1e4823ee95525ce0e04bb693c48e0e35
Asile yaiku:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.