Jeśli chcesz wyciąć obraz za pomocą pliku SVG, zaleca się użycie właściwości CSS `clip-path` . Poniższy skrypt usuwa kilka przeszkód: pliki SVG można zapisać za pomocą programu Illustrator, można określić (względny lub bezwzględny) adres URL pliku SVG (przeglądarka Chrome obecnie natywnie obsługuje tylko pliki SVG w formie osadzonej), a wycięcie jest w pełni responsywne.
Najpierw utwórz maskę przycinającą w programie Adobe Illustrator i wyeksportuj plik SVG z następującymi ustawieniami:
Proporcje pliku SVG i obrazu powinny być takie same. Na koniec należy odwołać się do zewnętrznego pliku SVG w obrazie, 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.