Dacă doriți să decupați o imagine folosind un fișier SVG, este recomandat să utilizați proprietatea CSS `clip-path` . Următorul script elimină mai multe obstacole: fișierele SVG pot fi salvate folosind Illustrator, puteți specifica adresa URL (relativă sau absolută) a unui fișier SVG (Chrome acceptă în prezent nativ doar fișiere SVG inline), iar decuparea este, de asemenea, complet responsivă.
Mai întâi creați o mască de tăiere în Adobe Illustrator și exportați SVG cu următoarele setări:
Raporturile de aspect ale fișierului SVG și ale imaginii ar trebui să fie aceleași. În cele din urmă, fișierul SVG extern este referențiat în imagine, de exemplu, în atributul `data-clip` .:
1e4823ee95525ce0e04bb693c48e0e35
Acum integrați următorul script:
1e4823ee95525ce0e04bb693c48e0e35
Rezultatul este că:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.