Ha SVG segítségével szeretnél kivágni egy képet, ajánlott a `clip-path` CSS tulajdonságot használni. A következő szkript számos akadályt elhárít: az SVG-k menthetők az Illustrator segítségével, megadhatod az SVG (relatív vagy abszolút) URL-címét (a Chrome jelenleg csak natívan támogatja az inline SVG-ket), és a kivágás is teljesen reszponzív.
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 képarányainak meg kell egyezniük. Végül a külső SVG-re a képen hivatkozunk, például a `data-clip` 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.