Hvis du vil klippe et billede ud ved hjælp af en SVG, anbefales det at bruge CSS-egenskaben `clip-path` . Følgende script fjerner flere hindringer: SVG'er kan gemmes ved hjælp af Illustrator, du kan angive den (relative eller absolutte) URL for en SVG (Chrome understøtter i øjeblikket kun indlejrede SVG'er), og udskæringen er også fuldstændig responsiv.
Først opretter du en klippemaske i Adobe Illustrator og eksporterer SVG'en med følgende indstillinger:
Billedformatforholdene for SVG-filen og billedet skal være de samme. Endelig refereres der til den eksterne SVG i billedet, for eksempel i attributten `data-clip` .:
1e4823ee95525ce0e04bb693c48e0e35
Nu integrerer du følgende script:
1e4823ee95525ce0e04bb693c48e0e35
Resultatet er, at:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.