Comment corriger les découpes circulaires mal alignées à l'aide de masques en SVG ?

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 explorerons une autre approche utilisant des masques en SVG.

<code class="svg"><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>
  </defs>
  <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>
  <rect fill="url(#img)" width="100%" height="100%" mask="url(#hole)" />
</svg></code>

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.

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!