Pour détourer une image à partir d'un fichier SVG, il est recommandé d'utiliser la propriété CSS `clip-path` . Le script suivant lève plusieurs obstacles : les fichiers SVG peuvent être enregistrés avec Illustrator, vous pouvez spécifier l'URL (relative ou absolue) d'un fichier SVG (Chrome ne prend actuellement en charge nativement que les SVG intégrés), et le détourage est parfaitement adaptatif.
Vous créez d'abord un masque d'écrêtage dans Adobe Illustrator et exportez le SVG avec les paramètres suivants:
Les proportions du fichier SVG et de l'image doivent être identiques. Enfin, le fichier SVG externe est référencé dans l'image, par exemple dans l'attribut `data-clip` .:
1e4823ee95525ce0e04bb693c48e0e35
Maintenant, vous intégrez le script suivant:
1e4823ee95525ce0e04bb693c48e0e35
Le résultat est que:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.