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 :
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.
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 :
Exemple :
Considérez le HTML :
<div class="img-container"> <img class="clipped-img" src="image.jpg"> </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!