Comment puis-je utiliser des masques SVG pour étendre la zone de découpage des images en CSS ?

Agrandissement de la zone de découpage des images SVG

En CSS, vous pouvez délimiter des régions spécifiques d'une image à l'aide de chemins de détourage. Cependant, si le chemin de détourage ne s'aligne pas parfaitement avec la zone souhaitée, l'image peut apparaître tronquée.

Pour résoudre ce problème, envisagez d'utiliser SVG comme masque plutôt que comme chemin de détourage. Cette méthode vous permet de manipuler la taille et la position du SVG comme une image d'arrière-plan.

Pour appliquer le SVG comme masque :

1. Définissez la viewBox correcte :

   .clipped-img {
     ...
     -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 207 167"><path d="..."></path></svg>') 
               center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 207 167"><path d="..."></path></svg>') 
               center/contain no-repeat;
   }

   Cela ajuste la taille du SVG et garantit qu'il s'aligne avec celui de l'image. limites.

2. Ajustez la taille de l'image et l'ajustement de l'objet :

   .clipped-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }

   Ces propriétés garantissent que l'image remplit la zone de découpage et est correctement mise à l'échelle.

Avantages du SVG Masques :

• Redimensionnement et repositionnement dynamiques : Des ajustements peuvent être effectués en fonction de la taille de l'écran ou de l'interaction de l'utilisateur.
• Masquez plusieurs éléments : Un seul masque SVG peut être utilisé pour façonner plusieurs images ou éléments.
• Préserver qualité de l'image : La mise à l'échelle n'entraîne pas de pixellisation ou de distorsion comme c'est le cas avec les chemins de clip.

Exemple :

Considérez le HTML :

<div class="img-container">
  <img  class="clipped-img lazy" src="/static/imghwm/default1.png" data-src="image.jpg" alt="Comment puis-je utiliser des masques SVG pour étendre la zone de découpage des images en CSS ?" >
</div>

Pour ajuster la taille et la forme du masque, modifiez simplement la viewBox dans le dossier du masque. 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!