Bagaimana untuk Memotong Bahagian Pekeliling daripada Imej Menggunakan Topeng dalam SVG?

Memotong Bahagian Pekeliling daripada Imej

Apabila cuba memotong imej menggunakan laluan SVG, ia kadangkala boleh kelihatan seolah-olah imej tidak sesuai dengan betul. Untuk mencapai potongan bulatan yang diingini, ikuti langkah berikut:

Kod CSS berikut mentakrifkan laluan klip menggunakan laluan SVG yang disediakan. Walau bagaimanapun, imej masih mungkin tidak muat dengan betul.

<code class="css">.topbar-chat-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  clip-path: url(#topbar-img-svg);
}</code>

Untuk menyelesaikan isu ini, pendekatan SVG alternatif boleh diambil.

<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="image.jpg" x="0" y="0" width="200" height="200" />
    </pattern>
  </defs>

  <rect fill="url(#img)" width="100%" height="100%" mask="url(#hole)" />
</svg></code>

Kaedah ini mentakrifkan topeng dalam SVG, memastikan potongan bulat yang bersih. Penggunaan fill="url(#img)" dalam tag mengisi segi empat tepat dengan imej yang diingini, menggunakan topeng untuk mencapai kesan yang dimaksudkan.

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