Comment redimensionner une image pour un ajustement de masque SVG circulaire ?

Redimensionner une image pour l'adapter à un chemin SVG circulaire

Lorsque vous essayez de couper une partie circulaire d'une image à l'aide d'un chemin SVG, il est important pour assurer un bon alignement. Si l'image ne s'ajuste pas bien, cela peut être dû à un dimensionnement ou un positionnement incorrect du masque SVG.

Voici une approche alternative pour obtenir le résultat souhaité :

Amélioration à l'aide un masque SVG :

Cette méthode utilise un masque SVG pour créer un trou circulaire dans lequel l'image est affiché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="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 mask -->
  <rect fill="url(#img)" width="100%" height="100%" mask="url(#hole)" />
</svg></code>

Explication :

• #hole : Ceci définit le masque SVG contenant deux cercles, un blanc et un noir. Le cercle blanc représente la zone à afficher, tandis que le cercle noir crée un masque pour masquer la zone à l'extérieur du cercle.
• #img : Le motif SVG définit un motif à l'aide d'une image. L'attribut patternUnits="userSpaceOnUse" garantit que le motif s'étire pour s'adapter à la forme à laquelle il est appliqué.
• L'élément rect remplit tout le conteneur SVG avec le motif #img et applique le masque #hole pour révéler la découpe circulaire.

Grâce à cette approche améliorée, l'image devrait désormais s'adapter correctement au masque SVG 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!