Comment ajuster dynamiquement les dimensions SVG ClipPath pour correspondre à la largeur du conteneur ?

Comment personnaliser les dimensions SVG ClipPath

Cet article fournit une solution pour ajuster dynamiquement la taille d'une zone ClipPath définie par un SVG. En utilisant le SVG comme masque, vous pouvez facilement manipuler ses dimensions et sa position.

Comprendre le problème

Dans l'extrait de code fourni, un conteneur rectangulaire avec un vert l’arrière-plan a une image SVG découpée. L'objectif est d'augmenter les dimensions de la forme de découpage pour qu'elles correspondent à la largeur de la zone verte colorée.

Solution : Utiliser SVG comme masque

Pour obtenir l'effet souhaité effet, le SVG peut être appliqué comme masque à l’image découpée. En définissant correctement l'attribut viewBox du SVG, vous pouvez contrôler sa taille et sa position. Voici une version mise à jour du code :

CSS :

.img-container {
  width: 300px;
  height: 300px;
  background-color: lightgreen; 
  margin:5px;
}

.clipped-img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  -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="M199.6,18.9c-4.3-8.9-12.5-16.4-22.3-17.8c-11.9-1.7-23.1,5.4-32.2,13.2c-9.1,7.8-17.8,16.8-29.3,20.3c-20.5,6.2-41.7-7.4-63.1-7.5C38.7,27,24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.2c32.8,13.6,72.1,5.9,100.9-15c27.4-19.9,44.3-54.9,47.4-88.6c0.2-2.7,0.4-5.3,0.5-7.9C204.8,38,203.9,27.8,199.6,18.9z"></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="M199.6,18.9c-4.3-8.9-12.5-16.4-22.3-17.8c-11.9-1.7-23.1,5.4-32.2,13.2c-9.1,7.8-17.8,16.8-29.3,20.3c-20.5,6.2-41.7-7.4-63.1-7.5C38.7,27,24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.2c32.8,13.6,72.1,5.9,100.9-15c27.4-19.9,44.3-54.9,47.4-88.6c0.2-2.7,0.4-5.3,0.5-7.9C204.8,38,203.9,27.8,199.6,18.9z"></path></svg>' ) 
               center/contain no-repeat;
}

HTML :

<div>

Explication :

• Le CSS pour .clipped-img utilise désormais la propriété mask pour appliquer le SVG comme masque.
• L'attribut viewBox du SVG a été défini sur "0 0 207 167" pour correspondre aux dimensions de la forme de découpage.
• En spécifiant la largeur du conteneur img dans différents divs, vous pouvez facilement ajuster la taille du masque SVG et le clippé région.

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!