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><p>Objektifnya adalah untuk mengembangkan dimensi bentuk keratan agar sepadan dengan lebar hijau kawasan.</p>
<h3 id="Penyelesaian">Penyelesaian</h3>
<p>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:</p>
<pre class="brush:php;toolbar:false">.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;
}</path></path>

<div class="img-container">
  <img  class="clipped-img lazy" src="/static/imghwm/default1.png" data-src="https://picsum.photos/id/1074/800/800" alt="Bagaimana untuk Mengubah Saiz Laluan Klip SVG untuk Memadankan Lebar Elemen yang Mengandungi?" >
</div>

<div class="img-container"><p>Dengan mengubah suai lebar bekas img, anda boleh melaraskan saiz kawasan terpotong dengan mudah.</p></div>