Cara Memotong Bahagian Imej Pekeliling Menggunakan Laluan SVG: Panduan Komprehensif

Memotong Imej Pekeliling dengan SVG

Dalam percubaan anda untuk memotong bahagian bulatan imej menggunakan laluan SVG, anda mengalami salah jajaran. Untuk mencapai hasil yang anda inginkan, kaedah alternatif menggunakan SVG menyediakan penyelesaian yang lebih mudah.

Berikut ialah kod:

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

Kaedah SVG ini melibatkan mencipta topeng dengan lubang bulat dan corak dengan imej. Segi empat tepat kemudian diisi dengan corak imej dan ditutup dengan lubang. Ini menghasilkan potongan bulat bagi imej dalam bekas SVG.

Atas ialah kandungan terperinci Cara Memotong Bahagian Imej Pekeliling Menggunakan Laluan SVG: Panduan Komprehensif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!