Comment découper une partie circulaire d'une image à l'aide d'un masque en SVG ?

Découper une partie circulaire à partir d'une image

Lorsque vous essayez de découper une image à l'aide d'un chemin SVG, il peut parfois sembler que l'image ne s'ajuste pas correctement. Pour obtenir la découpe circulaire souhaitée, suivez ces étapes :

Le code CSS suivant définit un chemin de clip en utilisant le chemin SVG fourni. Cependant, l'image peut toujours ne pas s'adapter correctement.

<code class="css">.topbar-chat-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  clip-path: url(#topbar-img-svg);
}</code>

Pour résoudre ce problème, une approche SVG alternative peut être adoptée.

<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>
    <pattern id="img" patternUnits="userSpaceOnUse" width="200" height="200">
      <image xlink:href="image.jpg" x="0" y="0" width="200" height="200" />
    </pattern>
  </defs>

  <rect fill="url(#img)" width="100%" height="100%" mask="url(#hole)" />
</svg></code>

Cette méthode définit un masque dans le SVG, assurant une découpe circulaire propre. L'utilisation de fill="url(#img)" dans le champ La balise remplit le rectangle avec l'image souhaitée, en appliquant le masque pour obtenir l'effet souhaité.

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!