Bagaimana untuk Melaraskan Dimensi ClipPath SVG Secara Dinamik untuk Memadankan Lebar Bekas?

Cara Menyesuaikan Dimensi ClipPath SVG

Artikel ini menyediakan penyelesaian untuk melaraskan saiz kawasan ClipPath secara dinamik yang ditakrifkan oleh SVG. Dengan menggunakan SVG sebagai topeng, anda boleh memanipulasi dimensi dan kedudukannya dengan mudah.

Memahami Masalah

Dalam coretan kod yang disediakan, bekas segi empat tepat dengan warna hijau latar belakang mempunyai imej SVG yang dipotong. Matlamatnya adalah untuk meningkatkan dimensi bentuk keratan agar sepadan dengan lebar kawasan hijau yang berwarna.

Penyelesaian: Menggunakan SVG sebagai Topeng

Untuk mencapai yang diinginkan kesan, SVG boleh digunakan sebagai topeng pada imej yang dipotong. Dengan menetapkan atribut ViewBox SVG dengan betul, anda boleh mengawal saiz dan kedudukannya. Berikut ialah versi kod yang dikemas kini:

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>

Penjelasan:

• CSS untuk .clipped-img kini menggunakan sifat mask untuk menggunakan SVG sebagai topeng.
• Atribut ViewBox SVG telah ditetapkan kepada "0 0 207 167" untuk memadankan dimensi bentuk keratan.
• Dengan menentukan lebar bekas img dalam div berbeza, anda boleh melaraskan saiz topeng SVG dan kawasan terpotong.

Atas ialah kandungan terperinci Bagaimana untuk Melaraskan Dimensi ClipPath SVG Secara Dinamik untuk Memadankan Lebar Bekas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!