Apakah ada cara untuk menggunakan SVG sebagai konten dalam elemen pseudo: sebelum atau: setelah

246

Saya ingin menempatkan beberapa gambar SVG sebelum beberapa elemen yang dipilih. Saya menggunakan jQuery tapi itu tidak relevan.

Saya ingin memiliki :beforeelemen sebagai:

#mydiv:before {
  content: '<svg.. code here</svg>';
  display: block;
  width: 22px;
  height: 10px;
  margin: 10px 5px 0 10px;
}

Jika saya melakukannya seperti yang ditunjukkan di atas, itu hanya menampilkan string. Saya memeriksa spesifikasi dan tampaknya ada beberapa batasan pada konten apa yang bisa. Apakah ada batasan untuk pembatasan ini? Hanya konten css yang relevan dengan pertanyaan saya.

css svg Cerah
sumber

1

Apakah ada yang salah dengan menggunakannya sebagai gambar latar?

cimmanon

1

Saya ingin menggunakannya untuk menghasilkan pointer mewah ke tooltips JQuery UI. Saya melakukannya sekarang dengan hack elemen pseudo CSS tapi itu memberi saya hanya segitiga. Gambar latar tidak akan berfungsi dalam hal ini karena saya memerlukan sesuatu yang melampaui elemen.

Cerah

252

Ya kamu bisa! Baru saja menguji ini dan berfungsi dengan baik, ini luar biasa! Masih tidak bekerja dengan html, tetapi tidak dengan svg.

Di index.html saya, saya punya:

<div id="test" style="content: url(test.svg); width: 200px; height: 200px;"></div>

Dan test.svg saya terlihat seperti ini:

<svg xmlns="http://www.w3.org/2000/svg">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
   <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3"/>
</svg>

dezman
sumber

18

Kecuali SVGs yang khusus, Anda harus dapat memperlakukan mereka sama seperti yang Anda lakukan gambar: content: url(path/to/my.svg). Itu tidak berarti itu akan bekerja dengan pustaka tooltips UI jQuery, meskipun.

cimmanon

1

@immanon hmm, itu manis, saya ingin mengujinya. Jadi di my.html atau apa pun yang saya bisa punya banyak kode html untuk membuat ... terdengar luar biasa.

dezman

2

Mengapa Anda ingin melakukan ini? Jika Anda sudah memiliki kode svg di file, maka tidak perlu memasukkannya ke dalam kelas pseudo. Inti dari pseudo-class adalah untuk mengurangi elemen DOM ketika Anda ingin menambahkan sedikit konten, tetapi dalam kasus Anda jika Anda hanya menggunakan kode svg Anda biasanya itu tidak akan lebih buruk (dan mungkin lebih bersih) daripada meletakkannya di pseudo -kelas (yang juga mungkin tidak mungkin). Kecuali tentu saja jika Anda ingin meletakkan kode svg Anda di banyak lokasi, dalam hal ini Anda hanya perlu menyimpan kode svg Anda di file terpisah seperti gambar.

dezman

6

sayangnya, saya tidak percaya solusi ini bekerja dengan sprite SVG. misalnya, content: url(mysprite.svg#my-icon)tidak akan benar-benar menarik ikon Anda. saya ingin terbukti salah, :)

Jason

1

@ watson, semantik. HTML = struktur, CSS = presentasi. Jika SVG bersifat dekoratif maka tidak boleh dalam struktur HTML, itu harus dalam CSS.

deathlock

137

Iya. Anda dapat menambahkan SVG sebagai gambar latar belakang yang kosong: setelah atau: sebelumnya. Ini dia:

.anchor:before {
  display: block;
  content: ' ';
  background-image: url('../images/anchor.svg');
  background-size: 28px 28px;
  height: 28px;
  width: 28px;
}

DerZyklop
sumber

4

Saya menemukan ini salah satu solusi terbaik, setelah mencari sebentar. Anda dapat mengontrol setiap aspek tunggal elemen yang disisipkan dan bekerja dengan cara normal style-sheet CSS bekerja, dengan logika terpisah. Hebat

Danielo515

... ahh ini membuat harapan saya naik, sampai saya menyadari bahwa background-sizeitu tidak didukung di Opera Mini. Ini sangat membuat frustrasi.

deathlock

Bekerja dengan baik. @deathlock, ukuran latar belakang tidak diperlukan karena Anda mendefinisikan dimensi di svg itu sendiri, saya tidak membutuhkannya.

Eric Soyke

1

Seharusnya jawaban yang diterima karena pertanyaan mengatakan "dalam elemen pseudo: sebelum atau: setelah"

ZalemCitizen

Saya harus menambahkan <?xml version="1.0" encoding="utf-8"?>ke awal file svg saya untuk membuatnya berfungsi.

Nicolas Boisteault

130

#mydiv:before {
    content: url("data:image/svg+xml; utf8, <svg.. code here</svg>");
    display:block;
    width:22px;
    height:10px;
    margin:10px 5px 0 10px;
}

pastikan svg Anda tidak mengandung tanda kutip ganda, dan uriencode simbol # apa pun.

Jenny
sumber

8

Karena SVG sering menggunakan tanda kutip ganda, Anda juga bisa menggunakan tanda kutip luar tunggal. @ Saran Jenny adalah cara terbaik untuk melakukannya jika Anda tidak ingin menggunakan file SVG eksternal.

Micros

2

Ini bagus. Sayangnya itu hanya bekerja dengan Chrome untuk saya (diuji pada Chrome, Firefox dan Edge).

Arsen

2

OK itu bekerja pada FF. Hanya perlu memperhatikan bagian "tidak #". Pastikan juga untuk menggunakan tag div (sepertinya tidak berfungsi dengan rentang). Sedihnya masih belum berhasil untuk Edge.

Arsen

Seperti banyak solusi brilian, itu tidak didukung oleh IE11. url('file.svg')Namun bekerja.

Bob Stein

6

Yang saya temukan penting adalah menambahkan xmlns='http://www.w3.org/2000/svg'bagian <svg> agar berfungsi di Chrome 66.x. Misalnya - chevron kecil akan menjadi:

content:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' fill='white'><path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /></svg>");

darth0s

28

Memanfaatkan sprite CSS dan data uri memberikan manfaat ekstra menarik seperti pemuatan cepat dan lebih sedikit permintaan DAN kami mendapatkan dukungan IE8 dengan menggunakan image / base64:

Sampel codepen menggunakan SVG

HTML

<div class="div1"></div>
<div class="div2"></div>

CSS

.div1:after, .div2:after {
  content: '';
  display: block;
  height: 80px;
  width: 80px;
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20height%3D%2280%22%20width%3D%22160%22%3E%0D%0A%20%20%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22red%22%20%2F%3E%0D%0A%20%20%3Ccircle%20cx%3D%22120%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22blue%22%20%2F%3E%0D%0A%3C%2Fsvg%3E);
}
.div2:after {
  background-position: -80px 0;
}

Untuk IE8, ubah ke ini:

  background-image: url(data:image/png;base64,data......);

Seorang anak
sumber

Tapi ini tidak bisa diukur, bukan? Saya tidak dapat mengubah ukurannya menjadi 16px atau 320px sesuka hati.

deathlock

@deathlock Tentu saja itu bersisik, meskipun bukan sampel saya karena memiliki ukuran tetap, lebar 80px / tinggi.

Ason

1

@deathlock Bolehkah saya bertanya apakah Anda downvoted karena sampel di atas tidak skala?

Ason

bagaimana Anda membuatnya skala? Dan tidak, saya tidak melakukannya.

deathlock

@deathlock Terima kasih, dan ini adalah salah satu cara untuk menskalakan svg: jsfiddle.net/ess6ywce ... menggunakan persen. Juga, cari SO dengan scale svgdan Anda akan menemukan banyak cara

Ason

22

<div class="author_">Lord Byron</div>

.author_ {  font-family: 'Playfair Display', serif; font-size: 1.25em; font-weight: 700;letter-spacing: 0.25em; font-style: italic;
  position:relative;
  margin-top: -0.5em;
  color: black;
  z-index:1;
  overflow:hidden;
  text-align:center;
 
}


.author_:after{
   left:20px;
  margin:0 -100% 0 0;
  display: inline-block;
  height: 10px;
  content: url(data:image/svg+xml,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120px%22%20height%3D%2220px%22%20viewBox%3D%220%200%201200%20200%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Cpath%20stroke%3D%22black%22%20stroke-width%3D%223%22%20fill%3D%22none%22%20d%3D%22M1145%2085c17%2C7%208%2C24%20-4%2C29%20-12%2C4%20-40%2C6%20-48%2C-8%20-9%2C-15%209%2C-34%2026%2C-42%2017%2C-7%2045%2C-6%2062%2C2%2017%2C9%2019%2C18%2020%2C27%201%2C9%200%2C29%20-27%2C52%20-28%2C23%20-52%2C34%20-102%2C33%20-49%2C0%20-130%2C-31%20-185%2C-50%20-56%2C-18%20-74%2C-21%20-96%2C-23%20-22%2C-2%20-29%2C-2%20-56%2C7%20-27%2C8%20-44%2C17%20-44%2C17%20-13%2C5%20-15%2C7%20-40%2C16%20-25%2C9%20-69%2C14%20-120%2C11%20-51%2C-3%20-126%2C-23%20-181%2C-32%20-54%2C-9%20-105%2C-20%20-148%2C-23%20-42%2C-3%20-71%2C1%20-104%2C5%20-34%2C5%20-65%2C15%20-98%2C22%22%2F%3E%0A%3C%2Fsvg%3E%0A);
}
.author_:before {
  right:20px;
  margin:0 0 0 -100%;
  display: inline-block;
  height: 10px;
  content: url(data:image/svg+xml,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120px%22%20height%3D%2220px%22%20viewBox%3D%220%200%201200%20130%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Cpath%20stroke%3D%22black%22%20stroke-width%3D%223%22%20fill%3D%22none%22%20d%3D%22M55%2068c-17%2C6%20-8%2C23%204%2C28%2012%2C5%2040%2C7%2048%2C-8%209%2C-15%20-9%2C-34%20-26%2C-41%20-17%2C-8%20-45%2C-7%20-62%2C2%20-18%2C8%20-19%2C18%20-20%2C27%20-1%2C9%200%2C29%2027%2C52%2028%2C23%2052%2C33%20102%2C33%2049%2C-1%20130%2C-31%20185%2C-50%2056%2C-19%2074%2C-21%2096%2C-23%2022%2C-2%2029%2C-2%2056%2C6%2027%2C8%2043%2C17%2043%2C17%2014%2C6%2016%2C7%2041%2C16%2025%2C9%2069%2C15%20120%2C11%2051%2C-3%20126%2C-22%20181%2C-32%2054%2C-9%20105%2C-20%20148%2C-23%2042%2C-3%2071%2C1%20104%2C6%2034%2C4%2065%2C14%2098%2C22%22%2F%3E%0A%3C%2Fsvg%3E%0A);
}

	<div class="author_">Lord Byron</div>

Luaskan cuplikan

Alat yang mudah digunakan untuk SVG encoding url-encoder

Alexei Zababurin
sumber

5

Hati-hati semua jawaban lain memiliki beberapa masalah di IE.

Mari kita situasi ini - tombol dengan ikon prepended. Semua browser menangani ini dengan benar, tetapi IE mengambil lebar elemen dan menskala konten sebelumnya agar sesuai. JSFiddle

#mydiv1 { width: 200px; height: 30px; background: green; }
#mydiv1:before {
    content: url("data:url or /standard/url.svg");
}

Solusi adalah mengatur ukuran sebelum elemen dan membiarkannya di tempatnya:

#mydiv2 { width: 200px; height: 30px; background: green; }
#mydiv2:before {
    content: url("data:url or /standard/url.svg");
    display: inline-block;
    width: 16px; //only one size is alright, IE scales uniformly to fit it
}

The background-image+ background-sizesolusi bekerja dengan baik, tapi sedikit unhandy, karena Anda harus menentukan ukuran yang sama dua kali.

Hasilnya di IE11:

Rendering IE

zbycz
sumber

5

Untuk memperluas topik ini lebih jauh. Jika Anda ingin menambahkan ikon Font Awesome 5 Anda perlu menambahkan beberapa CSS tambahan.

Ikon secara default memiliki kelas svg-inline--fadan fa-w-*.

Ada juga kelas pengubah seperti fa-lg, fa-rotate-*dan lainnya. Anda perlu memeriksa svg-with-js.cssfile dan menemukan CSS yang tepat untuk itu.

Anda perlu menambahkan warna Anda sendiri ke ikon css jika tidak maka akan menjadi hitam secara default, misalnya di fill='%23f00'mana %23dikodekan #.

h1::before{

  /* svg-inline--fa */
  display:inline-block;
  font-size:inherit;
  height:1em;
  overflow:visible;
  vertical-align:-.125em;
  
  /* fa-w-14 */
  width:.875em;
  
  /* Icon */
  content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23f00' d='M400 256H152V152.9c0-39.6 31.7-72.5 71.3-72.9 40-.4 72.7 32.1 72.7 72v16c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24v-16C376 68 307.5-.3 223.5 0 139.5.3 72 69.5 72 153.5V256H48c-26.5 0-48 21.5-48 48v160c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zM264 408c0 22.1-17.9 40-40 40s-40-17.9-40-40v-48c0-22.1 17.9-40 40-40s40 17.9 40 40v48z'%3E%3C/path%3E%3C/svg%3E");
  
  /* Margin */
  margin-right:.75rem;
}

<h1>Lorem Ipsum</h1>

Luaskan cuplikan

Jakub Muda
sumber

-1

.myDiv {
  display: flex;
  align-items: center;
}

.myDiv:before {
  display: inline-block;
  content: url(./dog.svg);
  margin-right: 15px;
  width: 10px;
}

Michael Alfandre
sumber

3

Anda harus menjelaskan sedikit lebih banyak jawaban Anda. Hanya dari ini, sangat sulit untuk mengetahui bagaimana atau mengapa jawaban Anda bekerja.

ifconfig

Apakah ada cara untuk menggunakan SVG sebagai konten dalam elemen pseudo: sebelum atau: setelah

Jawaban: