Si vous souhaitez découper une image à l'aide d'un SVG, l'utilisation de la propriété CSS clip-path est recommandée. Le script suivant déclenche des barrières cahoteuses : Le SVG peut être enregistré à l'aide d'Illustrator, vous pouvez spécifier l'URL (relative ou absolue) d'un SVG (Chrome ne supporte jusqu'à présent nativement que le SVG en ligne) et le décolleté est également complètement réactif.
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 SVG et de l'image doivent être les mêmes. Enfin, le 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.