Ini adalah tanya jawab diri sendiri atas sepotong kode praktis yang saya buat.
Saat ini, tidak ada cara mudah untuk menanamkan gambar SVG dan kemudian memiliki akses ke elemen SVG melalui CSS. Ada berbagai metode menggunakan kerangka kerja JS SVG, tetapi mereka terlalu rumit jika semua yang Anda lakukan adalah membuat ikon sederhana dengan keadaan rollover.
Jadi inilah yang saya pikirkan, yang saya pikir sejauh ini adalah cara termudah untuk menggunakan file SVG di situs web. Dibutuhkan konsepnya dari metode penggantian teks-ke-gambar awal, tetapi sejauh yang saya ketahui belum pernah dilakukan untuk SVG.
Ini pertanyaannya:
Jawaban:
Pertama, gunakan tag IMG dalam HTML Anda untuk menyematkan grafik SVG. Saya menggunakan Adobe Illustrator untuk membuat grafik.
Ini seperti bagaimana Anda menanamkan gambar normal. Perhatikan bahwa Anda perlu mengatur IMG untuk memiliki kelas svg. Kelas 'tautan sosial' hanyalah untuk contoh saja. ID tidak diperlukan, tetapi berguna.
Kemudian gunakan kode jQuery ini (dalam file terpisah atau sebaris di HEAD).
Apa yang dilakukan oleh kode di atas adalah mencari semua IMG dengan kelas 'svg' dan menggantinya dengan SVG inline dari file tertaut. Keuntungan besar adalah memungkinkan Anda menggunakan CSS untuk mengubah warna SVG sekarang, seperti:
Kode jQuery yang saya tulis juga port di ID gambar dan kelas asli. Jadi CSS ini juga berfungsi:
Atau:
Anda dapat melihat contohnya berfungsi di sini: http://labs.funkhausdesign.com/examples/img-svg/img-to-svg.html
Kami memiliki versi yang lebih rumit yang mencakup caching di sini: https://github.com/funkhaus/style-guide/blob/master/template/js/site.js#L32-L90
sumber
});
$. Get with}, 'xml');
img[src$=".svg"]
dan menghilangkan kebutuhan untuksvg
kelas.$('#ico_company path').removeAttr('fill')
. Maka Anda bisa melakukannya#ico_company { fill: #ccc }
di file CSS AndaGaya
Naskah
sumber
width="170.667"
dalam kasus sayapath
bentuk (sepertirect
) Anda harus menanganinya dalam css jugaAnda sekarang dapat menggunakan properti CSS
filter
di sebagian besar browser modern (termasuk Edge, tetapi tidak IE11). Ini bekerja pada gambar SVG serta elemen lainnya. Anda dapat menggunakanhue-rotate
atauinvert
mengubah warna, meskipun mereka tidak membiarkan Anda mengubah warna yang berbeda secara independen. Saya menggunakan kelas CSS berikut untuk menampilkan versi ikon "cacat" (di mana aslinya adalah gambar SVG dengan warna jenuh):Ini membuatnya menjadi abu-abu terang di sebagian besar browser. Di IE (dan mungkin Opera Mini, yang belum saya uji) terasa memudar oleh properti opacity, yang masih terlihat cukup bagus, meskipun tidak abu-abu.
Berikut adalah contoh dengan empat kelas CSS berbeda untuk ikon lonceng Twemoji : asli (kuning), kelas "dinonaktifkan" di atas,
hue-rotate
(hijau), daninvert
(biru).Tampilkan cuplikan kode
sumber
if ($('.w3-top img').css("color") == "rgb(0, 0, 0)") { $('.w3-top img').css("filter", "invert(100%)"); $('.w3-top img').css("-webkit-filter", "invert(100%)"); };
Atau Anda dapat menggunakan CSS
mask
, dukungan browser yang diberikan tidak baik tetapi Anda dapat menggunakan mundursumber
-webkit-mask
tidak boleh digunakan di situs web produksi mana pun.Jika Anda dapat memasukkan file (PHP sertakan atau sertakan melalui CMS pilihan Anda) di halaman Anda, Anda dapat menambahkan kode SVG dan memasukkannya ke halaman Anda. Ini berfungsi sama seperti menempelkan sumber SVG ke halaman, tetapi membuat markup halaman lebih bersih.
Manfaatnya adalah Anda dapat menargetkan bagian-bagian SVG Anda melalui CSS untuk dibawa-bawa - tidak perlu javascript.
http://codepen.io/chriscoyier/pen/evcBu
Anda hanya perlu menggunakan aturan CSS seperti ini:
Perhatikan bahwa
!important
bit diperlukan untuk mengganti warna isian.sumber
<div ng-include="'svg.svg'"></div>
#pathidorclass:hover, .wrapperclass:hover #pathidorclass { fill: green; }
Atau bahkan hanya menghilangkan hover asli dari jalur SVG karena Anda menargetkannya melalui elemen pembungkus sekarang.@Rew Baker memberikan solusi yang bagus untuk menyelesaikan masalah. Kode berfungsi dengan baik. Namun, mereka yang menggunakan AngularJs mungkin menemukan banyak ketergantungan pada jQuery. Akibatnya, saya pikir itu adalah ide yang bagus untuk menempelkan untuk pengguna AngularJS, sebuah kode yang mengikuti solusi @Drew Baker.
Cara angularJs dari kode yang sama
1. Html : gunakan tag di bawah ini di file html Anda:
2. Petunjuk : ini akan menjadi arahan bahwa Anda perlu mengenali tag:
3. CSS :
4. Unit-test dengan karma-melati :
sumber
<div ng-include="/icons/my.svg" class="any-class-you-wish"></div>
ng-include
maka ubah saja baris inivar imgURL = element.attr('src');
kevar imgURL = element.attr('ng-include');
if (typeof(imgClass) !== 'undefined') { $svg.setAttribute("class", imgClass); }
alih-alih split dan untuk loop.angular.element(data)[0];
) dan membuatnya berfungsi dengan penggunaan IEif ($svg.getAttribute('class')) { $svg.setAttribute('class', $svg.getAttribute('class') + ' ' + imgClass); } else { $svg.setAttribute('class', imgClass); }
. Anda juga mungkin ingin menambahkancache: true
opsi$http.get
jika tidak, halaman Anda mungkin menjadi sangat lambat.Saya menyadari bahwa Anda ingin menyelesaikan ini dengan CSS, tetapi hanya pengingat jika itu adalah gambar kecil dan sederhana - Anda selalu dapat membukanya di Notepad ++ dan mengubah jalur / isi elemen apa pun:
Itu bisa menghemat satu ton skrip jelek. Maaf jika ini tidak masuk akal, tetapi kadang-kadang solusi sederhana dapat diabaikan.
... bahkan menukar banyak gambar svg mungkin lebih kecil daripada beberapa potongan kode untuk pertanyaan ini.
sumber
Saya menulis arahan untuk mengatasi masalah ini dengan AngularJS. Ini tersedia di sini - ngReusableSvg .
Itu menggantikan elemen SVG setelah itu diberikan, dan menempatkannya di dalam
div
elemen, membuat CSS-nya mudah diubah. Ini membantu menggunakan file SVG yang sama di tempat yang berbeda menggunakan ukuran / warna yang berbeda.Penggunaannya sederhana:
Setelah itu, Anda dapat dengan mudah memiliki:
sumber
TL / DR: PERGI di sini-> https://codepen.io/sosuke/pen/Pjoqqp
Penjelasan:
Saya berasumsi Anda memiliki html sesuatu seperti ini:
Pasti pergi rute filter, yaitu. svg Anda kemungkinan besar hitam atau putih. Anda dapat menerapkan filter untuk membuatnya menjadi warna apa pun yang Anda inginkan, misalnya, saya memiliki svg hitam yang saya inginkan hijau mint. Pertama-tama saya membalikkannya menjadi putih (yang secara teknis semua warna RGB penuh) kemudian bermain dengan saturasi rona dll. Untuk memperbaikinya:
Yang lebih baik adalah Anda bisa menggunakan alat untuk mengubah hex yang Anda inginkan menjadi filter untuk Anda: https://codepen.io/sosuke/pen/Pjoqqp
sumber
Ini versi untuk
knockout.js
berdasarkan jawaban yang diterima:Penting: Ini sebenarnya membutuhkan jQuery juga untuk penggantian, tapi saya pikir mungkin bermanfaat bagi sebagian orang.
Kemudian cukup terapkan
data-bind="svgConvert: true"
ke tag img Anda.Solusi ini sepenuhnya mengganti
img
tag dengan SVG dan ikatan tambahan apa pun tidak akan dihormati.sumber
get
akan memintanya lagi. Aku dianggap mengubahsrc
kedata-src
atribut padaimg
tag, tetapi menyimpulkan bahwa browser modern cukup mungkin pintar untuk cache file pulaBerikut adalah kode kerangka kerja, hanya js murni:
sumber
Ada pustaka sumber terbuka yang disebut SVGInject yang menggunakan
onload
atribut untuk memicu injeksi. Anda dapat menemukan proyek GitHub di https://github.com/iconfu/svg-injectBerikut adalah contoh minimal menggunakan SVGInject:
Setelah gambar dimuat,
onload="SVGInject(this)
akan memicu injeksi dan<img>
elemen akan diganti dengan isi file SVG yang disediakan dalamsrc
atribut.Ini memecahkan beberapa masalah dengan injeksi SVG:
SVG dapat disembunyikan sampai injeksi selesai. Ini penting jika gaya sudah diterapkan selama waktu pemuatan, yang jika tidak akan menyebabkan "flash konten tanpa gaya" singkat.
<img>
Elemen - elemen menyuntikkannya sendiri secara otomatis. Jika Anda menambahkan SVG secara dinamis, Anda tidak perlu khawatir tentang memanggil fungsi injeksi lagi.String acak ditambahkan ke setiap ID dalam SVG untuk menghindari memiliki ID yang sama beberapa kali dalam dokumen jika SVG disuntikkan lebih dari satu kali.
SVGInject adalah Javascript biasa dan bekerja dengan semua browser yang mendukung SVG.
Penafian: Saya adalah rekan penulis SVGInject
sumber
Jika kita memiliki lebih banyak gambar svg seperti itu, kita juga dapat mengambil bantuan file font.
Situs seperti https://glyphter.com/ bisa mendapatkan kita file font dari svgs kami.
Misalnya
sumber
Anda dapat menggunakan data-gambar untuk itu. menggunakan data-image (data-URI) Anda dapat mengakses SVG seperti inline.
Berikut adalah efek rollover menggunakan CSS murni dan SVG.
Saya tahu itu berantakan tetapi Anda bisa melakukannya dengan cara ini.
Anda dapat mengonversi svg Anda ke url data di sini
sumber
Karena SVG pada dasarnya adalah kode, Anda hanya perlu konten. Saya menggunakan PHP untuk mendapatkan konten, tetapi Anda dapat menggunakan apa pun yang Anda inginkan.
Lalu, saya sudah mencetak konten "apa adanya" di dalam wadah div
Untuk menetapkan aturan untuk anak SVG kontainer di CSS
Saya mendapat hasil ini dengan ikon materi SVG:
sumber
Solusi yang dipilih baik-baik saja jika Anda ingin jQuery memproses semua elemen svg di DOM Anda dan DOM Anda memiliki ukuran yang masuk akal. Tetapi jika DOM Anda besar dan Anda memutuskan untuk memuat bagian DOM Anda secara dinamis, itu benar-benar tidak masuk akal harus menelusuri ulang seluruh DOM hanya untuk memperbarui elemen svg. Alih-alih, gunakan plugin jQuery untuk melakukan ini:
Di html Anda, tentukan elemen svg sebagai berikut:
Dan terapkan plugin:
sumber
untuk: hover animasi acara kita dapat meninggalkan gaya di dalam file svg, seperti a
periksa ini di svgshare
sumber