Bagaimana untuk Mengisi Bulatan dengan Imej PNG Menggunakan Corak SVG?

Menggunakan Corak SVG untuk Mencipta Bulatan dengan Isian Imej PNG

Dalam dokumen SVG, anda boleh mengisi bentuk dengan corak imej. Walau bagaimanapun, apabila cuba mengisi bulatan dengan imej menggunakan atribut "isi" seperti di bawah, ia mungkin menyebabkan keseluruhan kawasan bulatan dipenuhi dengan warna pepejal:

<circle ... fill="url('images/word-cloud.png')"/>

Untuk mencapai isian imej, Corak SVG boleh digunakan. Elemen corak mentakrifkan grafik boleh guna semula yang boleh dirujuk dalam sifat isian elemen lain. Dengan mentakrifkan corak dengan imej sebagai kandungan, kita boleh membuat bulatan dengan isian imej yang diingini.

Berikut ialah contoh:

<svg width="700" height="660">
  <defs>
    <pattern>

Dalam kod ini, corak ditakrifkan oleh membalut elemen di sekeliling elemen dalam unsur. Atribut id corak ditetapkan kepada "imej." Atribut patternUnits menentukan bahawa corak akan menggunakan unit ruang pengguna, memastikan imej tidak diregangkan atau diherotkan.

Dalam elemen bulatan, atribut isian ditetapkan untuk merujuk corak "imej". Akibatnya, bulatan akan diisi dengan imej yang ditentukan dalam atribut "xlink:href" bagi elemen.

Pendekatan ini membolehkan kawalan fleksibel bagi isian imej, termasuk kedudukan dan penskalaan imej dalam bulatan.

Atas ialah kandungan terperinci Bagaimana untuk Mengisi Bulatan dengan Imej PNG Menggunakan Corak SVG?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!