Comment redimensionner un chemin de clip SVG pour qu'il corresponde à la largeur de l'élément contenant ?

Comment redimensionner la zone ClipPath de SVG ?

Considérez le scénario suivant :

.img-container {
  width: 300px;
  height: 300px;
  background-color: lightgreen;  
  overflow: hidden;
}

.clipped-img {
  clip-path: url('#header-clip-svg');
}

<div class="img-container">

  <!--clipping SVG-->
  <svg height="0" width="0">
    <defs>
      <clipPath>

L'objectif est d'étendre la dimensions de la forme de détourage pour correspondre à la largeur du green zone.

Solution

L'utilisation du SVG comme masque permet de contrôler sa taille et son emplacement, similaire à l'image d'arrière-plan. En définissant une valeur appropriée pour viewBox, vous pouvez obtenir l'effet souhaité :

.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, <path data here>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8, <path data here>') center/contain no-repeat;
}

<div class="img-container">
  <img class="clipped-img" src="https://picsum.photos/id/1074/800/800">
</div>

<div class="img-container">

En modifiant la largeur du conteneur img, vous pouvez ajuster la taille de la zone découpée sans effort.

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!