Bagaimana untuk Menggunting Bahagian Pekeliling yang Tepat daripada Imej Menggunakan SVG?

Memotong Bahagian Pekeliling daripada Imej: Panduan Komprehensif

Dalam bidang manipulasi imej, keupayaan untuk mengekstrak segmen bulat daripada imej dengan ketepatan adalah penting untuk pelbagai aplikasi. Artikel ini bertujuan untuk menangani cabaran yang dihadapi semasa mencapai tugasan ini menggunakan laluan SVG.

Isu timbul apabila imej yang diperoleh selepas keratan tidak menepati bentuk bulat yang diingini. Kebimbangan utama adalah dengan kesesuaian dan penjajaran imej dalam SVG yang ditentukan. Dengan menyediakan panduan langkah demi langkah, artikel ini menawarkan penyelesaian kepada masalah ini.

Memahami Kod Pendasar

Coretan CSS yang disediakan cuba menggunting imej melalui sifat laluan klip , yang merujuk SVG yang mengandungi laluan bulat. Walau bagaimanapun, kandungan imej kelihatan herot dan tidak sejajar. Percanggahan ini berpunca daripada keperluan untuk saiz dan kedudukan yang betul bagi kedua-dua SVG dan imej di dalamnya.

Pendekatan Mudah dan Berkesan

Untuk membetulkan isu ini, mari kita teroka kaedah alternatif menggunakan SVG yang memudahkan proses sambil mengekalkan ketepatan:

<code class="html"><svg width="200" height="200">
  <defs>
    <mask id="hole">
      <circle r="100" cx="100" cy="100" fill="white"/>
      <circle r="50" cx="180" cy="180" fill="black"/>
    </mask>
  <pattern id="img" patternUnits="userSpaceOnUse" width="200" height="200">
    <image  xlink:href="https://picsum.photos/200/200?image=1069" x="0" y="0" width="200" height="200" />
  </pattern>
  </defs>
  <rect fill="url(#img)" width="100%" height="100%" mask="url(#hole)" />
</svg></code>

Membedah Penyelesaian

Pendekatan berasaskan SVG ini menggabungkan elemen berikut:

1. Dua bersarang dan corak.
2. terdiri daripada dua bulatan bertindih; bulatan putih yang besar mewakili bentuk bulat yang diingini, manakala bulatan hitam yang lebih kecil menutup bahagian dalam bulatan putih.
3. Elemen corak termasuk teg yang mengimport imej sasaran.
4. Akhir sekali, elemen memenuhi seluruh kawasan SVG dengan corak yang disebutkan di atas. Atribut topeng merujuk kepada yang ditakrifkan sebelum ini, memotong imej dengan berkesan kepada bentuk bulat yang dimaksudkan.

Kesimpulan

Dengan menggunakan teknik ini, anda boleh dengan mudah mencapai potongan yang tepat bahagian bulat imej, mengurangkan sebarang masalah penjajaran atau herotan. Kaedah yang dipertingkatkan ini memastikan penyepaduan yang lancar ke dalam reka bentuk atau aplikasi anda, memberikan potongan bulat yang sempurna yang anda inginkan.

Atas ialah kandungan terperinci Bagaimana untuk Menggunting Bahagian Pekeliling yang Tepat daripada Imej Menggunakan SVG?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!