Comment couper des sections d'image circulaires à l'aide de chemins SVG : un guide complet

Découper des images circulaires avec SVG

Lors de votre tentative de couper une partie circulaire d'une image à l'aide d'un chemin SVG, vous avez rencontré un désalignement. Pour obtenir le résultat souhaité, une méthode alternative utilisant SVG propose une solution plus simple.

Voici le code :

<svg width="200" height="200">
  <defs>
    <mask id="hole">
      <circle r="100" cx="100" cy="100" fill="white"/>
      <circle r="50" cx="180" cy="180" fill="black"/>
    </mask>
  <pattern id="img" patternUnits="userSpaceOnUse" width="200" height="200">
    <image  xlink:href="https://picsum.photos/200/200?image=1069" x="0" y="0" width="200" height="200" />
  </pattern>
  </defs>
  <!-- create a rect, fill it with the image and apply the above mask -->
  <rect fill="url(#img)" width="100%" height="100%" mask="url(#hole)" />
</svg>

Cette méthode SVG consiste à créer un masque avec un trou circulaire et un motif avec l'image. Un rectangle est ensuite rempli du motif d'image et masqué avec le trou. Il en résulte une découpe circulaire de l'image dans le conteneur SVG.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!