Εάν θέλετε να κόψετε μια εικόνα με τη βοήθεια ενός SVG, συνιστάται η χρήση της διαδρομής κλιπ ιδιοκτησίας CSS. Το ακόλουθο σενάριο ενεργοποιεί ανώμαλα εμπόδια: Το SVG μπορεί να αποθηκευτεί με τη βοήθεια του Illustrator, μπορείτε να καθορίσετε τη (σχετική ή απόλυτη) διεύθυνση URL ενός SVG (το Chrome υποστηρίζει έως τώρα μόνο εγγενώς μόνο ενσωματωμένο SVG) και το λαιμόκοψη είναι επίσης πλήρως ανταποκρινόμενο.
Αρχικά δημιουργείτε μια μάσκα αποκοπής στο Adobe Illustrator και εξάγετε το SVG με τις ακόλουθες ρυθμίσεις:
Οι λόγοι διαστάσεων του SVG και της εικόνας πρέπει να είναι οι ίδιοι. Τέλος, το εξωτερικό SVG αναφέρεται στην εικόνα, για παράδειγμα στο χαρακτηριστικό data-clip:
1e4823ee95525ce0e04bb693c48e0e35
Τώρα ενσωματώνετε το ακόλουθο σενάριο:
1e4823ee95525ce0e04bb693c48e0e35
Το αποτέλεσμα είναι ότι:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.