Bagaimana untuk Menambah Imej Latar Belakang pada Bulatan SVG Tanpa Isi Hitam?

Cara Menambah Imej Latar Belakang kepada Bentuk Bulatan SVG (Tanpa Isi Hitam)

Membuat bulatan SVG dengan latar belakang imej ialah mungkin menggunakan corak SVG. Begini cara untuk melaksanakannya:

Masalah:

Kod SVG berikut cuba menambah imej latar belakang pada bulatan tetapi mengisi bulatan dengan hitam:

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

Penyelesaian:

Untuk menggunakan isian imej, Corak SVG digunakan:

<svg ...>
  <defs>
    <pattern>

Penjelasan:

• Tentukan elemen dalam teg, menyatakan koordinat dan dimensinya.
• Benamkan imej menggunakan elemen dalam corak.
• Rujuk ID corak menggunakan atribut isian pada bulatan untuk menggunakan imej latar belakang.

Contoh:

Menambahkan imej latar belakang pada kalangan dengan ID "atas":

<svg ...>
  <defs>
    <pattern>

Atas ialah kandungan terperinci Bagaimana untuk Menambah Imej Latar Belakang pada Bulatan SVG Tanpa Isi Hitam?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!