Klip SVG'er ud af billeder med klipsti

Hvis du vil skære et billede ud ved hjælp af en SVG, anbefales det at bruge CSS-egenskabens klipsti . Følgende script udløser ujævn barrierer: SVG'en kan gemmes ved hjælp af Illustrator, du kan angive (relativ eller absolut) URL'en til en SVG (Chrome understøtter indtil nu kun indbygget inline SVG), og halsudskæringen reagerer også fuldstændigt.


Først opretter du en klippemaske i Adobe Illustrator og eksporterer SVG'en med følgende indstillinger:

Aspektforholdet mellem SVG og billedet skal være det samme. Endelig refereres den eksterne SVG til i billedet, for eksempel i dataklip- attributten:

1e4823ee95525ce0e04bb693c48e0e35

Nu integrerer du følgende script:

1e4823ee95525ce0e04bb693c48e0e35

Resultatet er, at:

See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.

Tilbage