Om du vill klippa ut en bild med hjälp av en SVG rekommenderas att du använder CSS-egenskapen `clip-path` . Följande skript eliminerar flera hinder: SVG-filer kan sparas med Illustrator, du kan ange den (relativa eller absoluta) URL:en för en SVG (Chrome har för närvarande endast nativt stöd för inline-SVG-filer), och utklippet är också helt responsivt.
Först skapar du en klippmask i Adobe Illustrator och exporterar SVG med följande inställningar:
Bildförhållandena för SVG-filen och bilden ska vara desamma. Slutligen refereras den externa SVG-filen i bilden, till exempel i attributet `data-clip` .:
1e4823ee95525ce0e04bb693c48e0e35
Nu integrerar du följande skript:
1e4823ee95525ce0e04bb693c48e0e35
Resultatet är att:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.