Als u een afbeelding wilt uitknippen met behulp van een SVG, wordt het gebruik van de CSS-eigenschap clip-path aanbevolen. Het volgende script veroorzaakt hobbelige barrières: De SVG kan worden opgeslagen met behulp van Illustrator, u kunt de (relatieve of absolute) URL van een SVG specificeren (Chrome ondersteunt tot nu toe alleen inline SVG) en de halslijn is ook volledig responsive.
Eerst maakt u een uitknipmasker in Adobe Illustrator en exporteert u de SVG met de volgende instellingen::
De beeldverhoudingen van de SVG en de afbeelding moeten hetzelfde zijn. Ten slotte wordt in de afbeelding naar de externe SVG verwezen, bijvoorbeeld in het dataclip- attribuut:
1e4823ee95525ce0e04bb693c48e0e35
Nu integreer je het volgende script::
1e4823ee95525ce0e04bb693c48e0e35
Het resultaat is dat:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.