Om du vill klippa ut en bild med hjälp av en SVG, rekommenderas användning av CSS-egenskapens klippväg . Följande skript utlöser ojämna hinder: SVG kan sparas med hjälp av Illustrator, du kan ange (relativ eller absolut) URL till en SVG (Chrome stöder hittills endast inbyggt SVG) och halsen är också helt lyhörd.
Först skapar du en klippmask i Adobe Illustrator och exporterar SVG med följande inställningar:
Bildförhållandena för SVG och bilden ska vara desamma. Slutligen refereras den externa SVG: n till bilden, till exempel i dataklippsattributet:
1e4823ee95525ce0e04bb693c48e0e35
Nu integrerar du följande skript:
1e4823ee95525ce0e04bb693c48e0e35
Resultatet är att:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.