Yen sampeyan pengin ngethok gambar kanthi pitulung saka SVG, disaranake nggunakake clip-path properti CSS. Skrip ing ngisor iki nyebabake alangan sing angel: SVG bisa disimpen kanthi pitulung saka Illustrator, sampeyan bisa nemtokake URL (relatif utawa absolut) saka SVG (Chrome ndhukung nganti saiki mung SVG inline) lan garis leher uga responsif kabeh.
Pisanan sampeyan nggawe topeng kliping ing Adobe Illustrator lan ekspor SVG kanthi setelan ing ngisor iki:
Rasio aspek SVG lan gambar kudu padha. Pungkasane, SVG eksternal dirujuk ing gambar, kayata ing atribut klip data:
1e4823ee95525ce0e04bb693c48e0e35
Saiki sampeyan nggabungake skrip ing ngisor iki:
1e4823ee95525ce0e04bb693c48e0e35
Asile yaiku:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.