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;}.

html css image svg background-image jbochi
sumber
1
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

Jawaban:

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
3
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
12
@Christoph Saya tidak tahu, coba dan lihat.
robertc
2
@robertc Saya mencoba dan tidak berhasil, tetapi saya memiliki elemen gaya duplikat. Dengan menghilangkannya, itu berfungsi dengan baik;)
Christoph
4
@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
7
@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