Bagaimana untuk Membetulkan Potongan Pekeliling yang Tidak Sejajar Menggunakan Topeng dalam SVG?

Memotong Bahagian Pekeliling daripada Imej dengan SVG

Percubaan semasa anda menggunakan laluan klip untuk memotong bahagian bulat daripada imej tidak menjajarkan dengan betul. Untuk menangani isu ini, kami akan meneroka pendekatan lain menggunakan topeng dalam SVG.

<code class="svg"><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>
  </defs>
  <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>
  <rect fill="url(#img)" width="100%" height="100%" mask="url(#hole)" />
</svg></code>

Kod ini mencipta SVG dengan latar belakang ditetapkan kepada merah jambu. Di dalam elemen defs, kami mentakrifkan topeng yang dipanggil "lubang." Topeng ini terdiri daripada dua bulatan: bulatan putih besar yang mewakili kawasan bulatan yang anda mahu kekalkan daripada imej dan bulatan hitam yang lebih kecil yang menentukan potongan.

Elemen seterusnya ialah corak yang dipanggil "img." Corak ini menentukan imej yang anda mahu gunakan sebagai isian untuk bentuk. Kami menetapkan dimensi corak agar sepadan dengan saiz SVG dan menggunakan imej daripada URL.

Akhir sekali, kami mencipta segi empat tepat yang memenuhi seluruh ruang SVG. Isian segi empat tepat ditetapkan untuk merujuk corak "img", dan kami menggunakan topeng "lubang" untuk memotong bahagian bulat.

Atas ialah kandungan terperinci Bagaimana untuk Membetulkan Potongan Pekeliling yang Tidak Sejajar Menggunakan Topeng dalam SVG?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!