Ha egy képet SVG segítségével szeretne kivágni, akkor a CSS tulajdonság clip-path használata ajánlott. A következő szkript rögös akadályokat indít el: Az SVG menthető az Illustrator segítségével, megadhatja az SVG (relatív vagy abszolút) URL -jét (a Chrome eddig natívan csak inline SVG -t támogat ), és a nyakkivágás is teljesen érzékeny.
Először hozzon létre egy vágómaszkot az Adobe Illustrator alkalmazásban, és exportálja az SVG -t a következő beállításokkal:
Az SVG és a kép oldalarányainak azonosnak kell lenniük. Végül a külső SVG-re hivatkoznak a képen, például az adatklip attribútumban:
1e4823ee95525ce0e04bb693c48e0e35
Most integrálja a következő szkriptet:
1e4823ee95525ce0e04bb693c48e0e35
Az eredmény az:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.