Bagaimana untuk Mengubah Saiz Laluan Klip SVG untuk Memadankan Lebar Elemen yang Mengandungi?

Bagaimana untuk mengubah saiz kawasan ClipPath SVG?

Pertimbangkan senario berikut:

.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>

Objektifnya adalah untuk mengembangkan dimensi bentuk keratan agar sepadan dengan lebar hijau kawasan.

Penyelesaian

Menggunakan SVG sebagai topeng memberikan kawalan ke atas saiz dan peletakannya, serupa dengan imej latar belakang. Dengan menetapkan nilai yang sesuai untuk kotak paparan, anda boleh mencapai kesan yang diingini:

.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">

Dengan mengubah suai lebar bekas img, anda boleh melaraskan saiz kawasan terpotong dengan mudah.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Saiz Laluan Klip SVG untuk Memadankan Lebar Elemen yang Mengandungi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!