Découper des sections circulaires d'une image avec SVG

Votre tentative actuelle d'utiliser un chemin de détourage pour découper une section circulaire d'une image ne s'aligne pas correctement. Pour résoudre ce problème, nous allons explorer une autre approche utilisant des masques en SVG.

Ce code crée un SVG avec un arrière-plan défini sur rose. À l’intérieur de l’élément defs, nous définissons un masque appelé « trou ». Ce masque se compose de deux cercles : un grand cercle blanc représentant la zone circulaire que vous souhaitez conserver de l'image et un plus petit cercle noir déterminant la découpe.

L'élément suivant est un motif appelé "img". Ce motif spécifie l'image que vous souhaitez utiliser comme remplissage de la forme. Nous définissons les dimensions du motif pour qu'elles correspondent à la taille du SVG et utilisons une image provenant d'une URL.

Enfin, nous créons un rectangle qui remplit tout l'espace du SVG. Le remplissage du rectangle est défini pour référencer le motif "img", et nous appliquons le masque "trou" pour découper la section circulaire.