Αν θέλετε να αποκόψετε μια εικόνα χρησιμοποιώντας ένα SVG, συνιστάται να χρησιμοποιήσετε την ιδιότητα CSS `clip-path` . Το ακόλουθο σενάριο εξαλείφει αρκετά εμπόδια: Τα 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.