Comment redimensionner un chemin de clip SVG pour qu'il corresponde à la largeur de l'élément contenant ?-tutoriel CSS-php.cn

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

Linda Hamilton

Libérer： 2024-12-14 19:57:11

original

803 Les gens l'ont consulté

How to Resize an SVG Clip Path to Match the Containing Element's Width?

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');
}

Copier après la connexion

<div class="img-container">

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

Copier après la connexion

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;
}

Copier après la connexion

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

<div class="img-container">

Copier après la connexion

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!