Bagaimana untuk Mengubah Saiz Imej untuk Pekeliling SVG Mask Fit?

Mengubah Saiz Imej agar Sesuai dengan Laluan SVG Pekeliling

Apabila cuba memotong bahagian bulat daripada imej menggunakan laluan SVG, adalah penting untuk memastikan penjajaran yang betul. Jika imej tidak sesuai dengan baik, ia mungkin disebabkan oleh saiz atau kedudukan topeng SVG yang salah.

Berikut ialah pendekatan alternatif untuk mencapai hasil yang diingini:

Peningkatan Menggunakan Topeng SVG:

Kaedah ini menggunakan topeng SVG untuk mencipta lubang bulat di mana imej dipaparkan:

<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>
    <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>
  <!-- Create a rect, fill it with the image and apply the mask -->
  <rect fill="url(#img)" width="100%" height="100%" mask="url(#hole)" />
</svg></code>

Penjelasan:

• #hole: Ini mentakrifkan topeng SVG yang mengandungi dua bulatan, satu putih dan satu hitam. Bulatan putih mewakili kawasan yang akan dipaparkan, manakala bulatan hitam mencipta topeng untuk menyembunyikan kawasan di luar bulatan.
• #img: Corak SVG mentakrifkan corak menggunakan imej. Atribut patternUnits="userSpaceOnUse" memastikan corak meregang agar sesuai dengan bentuk yang digunakan.
• Elemen tegak mengisi keseluruhan bekas SVG dengan corak #img dan menggunakan topeng #lubang untuk mendedahkan potongan bulat.

Menggunakan pendekatan yang dipertingkatkan ini, imej kini sepatutnya muat dengan betul dalam topeng SVG bulat.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Saiz Imej untuk Pekeliling SVG Mask Fit?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!