Jeśli chcesz wyciąć obraz za pomocą SVG, zalecane jest użycie właściwości CSS clip-path . Poniższy skrypt uruchamia nierówne bariery: SVG można zapisać za pomocą programu Illustrator, można określić (względny lub bezwzględny) adres URL SVG (Chrome obsługuje do tej pory natywnie tylko wbudowane SVG), a dekolt jest również całkowicie responsywny.
Najpierw utwórz maskę przycinającą w programie Adobe Illustrator i wyeksportuj plik SVG z następującymi ustawieniami:
Proporcje obrazu SVG i obrazu powinny być takie same. Wreszcie na obrazie znajduje się odniesienie do zewnętrznego SVG, na przykład w atrybucie data-clip:
1e4823ee95525ce0e04bb693c48e0e35
Teraz integrujesz następujący skrypt:
1e4823ee95525ce0e04bb693c48e0e35
Rezultat jest taki, że:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.