Isi elemen jalur SVG dengan gambar latar belakang

166

Apakah mungkin untuk menetapkan elemen background-imageSVG <path>?

Misalnya, jika saya mengatur elemen class="wall", gaya CSS .wall {fill: red;}berfungsi, tetapi .wall{background-image: url(wall.jpg)}tidak .wall {background-color: red;}.

— jbochi
sumber

Memperlihatkan cara mengatur gambar latar belakang untuk teks SVG, secara opsional berdasarkan per karakter: stackoverflow.com/a/10853878/405017

— Phrogz

bagi mereka yang mencari informasi lebih dalam, cek tautan

— Paulo Bueno

261

Anda bisa melakukannya dengan membuat latar belakang menjadi sebuah pola :

<defs>
  <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
    <image xlink:href="wall.jpg" x="0" y="0" width="100" height="100" />
  </pattern>
</defs>

Sesuaikan lebar dan tinggi menurut gambar Anda, kemudian rujuk dari jalur seperti ini:

<path d="M5,50
         l0,100 l100,0 l0,-100 l-100,0
         M215,100
         a50,50 0 1 1 -100,0 50,50 0 1 1 100,0
         M265,50
         l50,100 l-100,0 l50,-100
         z"
  fill="url(#img1)" />

Contoh kerja

— robertc
sumber

sangat bagus, apakah ini berfungsi dengan gambar base64 juga? bukannya wall.jpg sesuatu data:image/png;base64,iVBORw0KGgoAAseperti yang Anda lakukan di CSS normal?

— Christoph

@Christoph Saya tidak tahu, coba dan lihat.

— robertc

@robertc Saya mencoba dan tidak berhasil, tetapi saya memiliki elemen gaya duplikat. Dengan menghilangkannya, itu berfungsi dengan baik;)

— Christoph

@robertc: Saya punya pertanyaan tentang jawaban Anda. Pola dimulai pada koordinat global (0,0). Apakah mungkin membiarkan pola menggunakan sistem koordinat lokal dari objek yang dilampirkan? Saya ingin menggambar persegi di tempat yang berbeda di svg saya dan apa yang terjadi adalah, bahwa pola diulangi di latar belakang lubang dan objek digunakan sebagai topeng.

— Tobias Golbs

@robertc harap perbarui jawaban Anda untuk menyebutkan bahwa xlink:hrefsudah usang sejak SVG 2 dan cukup gunakan hrefsekarang. developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href

— Blake Regalia