Dacă doriți să decupați o imagine cu ajutorul unui SVG, este recomandată utilizarea proprietății CSS clip-path . Următorul script declanșează bariere accidentate: SVG-ul poate fi salvat cu ajutorul Illustrator, puteți specifica URL-ul (relativ sau absolut) al unui SVG (Chrome acceptă până acum în mod nativ numai SVG în linie) și decolteul este, de asemenea, complet receptiv.
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 SVG și ale imaginii ar trebui să fie aceleași. În cele din urmă, SVG-ul extern este menționat î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.