Saya ingin menggunakan teknik ini http://css-tricks.com/svg-fallbacks/ dan mengubah warna svg tapi sejauh ini saya belum bisa melakukannya. Saya meletakkan ini di css tetapi gambar saya selalu hitam, tidak peduli apa. Kode saya:
.change-my-color {
fill: green;
}
<svg>
<image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback.png" />
</svg>
Jawaban:
Anda tidak dapat mengubah warna gambar seperti itu. Jika Anda memuat SVG sebagai gambar, Anda tidak bisa mengubah cara ditampilkan menggunakan CSS atau Javascript di browser.
Jika Anda ingin mengubah gambar SVG Anda, Anda harus memuatnya menggunakan
<object>
,<iframe>
atau menggunakan<svg>
inline.Jika Anda ingin menggunakan teknik di halaman, Anda memerlukan pustaka Modernizr, di mana Anda dapat memeriksa dukungan SVG dan menampilkan secara kondisional atau tidak gambar fallback. Anda kemudian dapat sebaris SVG Anda dan menerapkan gaya yang Anda butuhkan.
Lihat :
Tampilkan cuplikan kode
Anda dapat menyejajarkan SVG Anda, menandai gambar mundur Anda dengan nama kelas (
my-svg-alternate
):Dan dalam CSS gunakan
no-svg
kelas dari Modernizr (CDN: http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js ) untuk memeriksa dukungan SVG. Jika tidak ada dukungan SVG, blok SVG akan diabaikan dan gambar akan ditampilkan, jika tidak gambar akan dihapus dari pohon DOM (display: none
):Kemudian Anda dapat mengubah warna elemen inline Anda:
sumber
object
mendesain SVG tertanam dari dokumen hosting.Jawaban 2020
Filter CSS berfungsi pada semua browser saat ini
Untuk mengubah warna SVG
<img>
tag.Misalnya, output untuk
#00EE00
isfilter
ke dalam kelas ini.sumber
brightness(0) saturate(100%)
ke awal daftar filter terlebih dahulu akan mengubahnya 100% hitam, yang memungkinkan filter lain untuk mengubahnya ke warna yang benar.Untuk mengubah warna SVG apa pun, Anda dapat langsung mengubah kode svg dengan membuka file svg di editor teks apa pun . Kode tersebut mungkin terlihat seperti kode di bawah ini
Anda dapat mengamati bahwa ada beberapa tag XML seperti jalur, lingkaran, poligon dll . Di sana Anda dapat menambahkan warna Anda sendiri dengan bantuan atribut gaya . Lihatlah contoh di bawah ini
Tambahkan atribut style ke semua tag sehingga Anda bisa mendapatkan SVG dari warna yang Anda butuhkan
sumber
fill
seperti ini sajafill = "#AB7C94"
:? Tidak yakin mengapastyle
atribut diperlukanMenambahkan halaman uji - untuk mewarnai SVG melalui pengaturan Filter:
MISALNYA
filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg)
Unggah & Warna SVG - Jsfiddle Anda
Mengambil ide dari: https://blog.union.io/code/2017/08/10/img-svg-fill/
sumber
.custom-disabled > svg {filter:invert(0.2) sepia(1) saturte(0) hue-rotate(0);}
melakukan pekerjaan yang saya butuhkan untuk menonaktifkan ikon.Hanya SVG dengan informasi jalur . Anda tidak dapat melakukan itu pada gambar .. sebagai jalur Anda dapat mengubah goresan dan mengisi informasi dan Anda selesai. seperti Illustrator
jadi: melalui CSS Anda dapat menimpa
fill
nilai jalurtetapi jika Anda ingin cara yang lebih fleksibel karena Anda ingin mengubahnya dengan teks ketika memiliki beberapa efek melayang terjadi .. gunakan
sumber
cara termudah adalah membuat font dari SVG menggunakan layanan seperti https://icomoon.io/app/#/select atau semacamnya. unggah SVG Anda, klik "menghasilkan font", sertakan file font dan css ke sisi Anda dan cukup gunakan dan gaya itu seperti teks lainnya. Saya selalu menggunakannya seperti ini karena itu membuat styling jauh lebih mudah.
SUNTING: Seperti yang disebutkan dalam artikel yang dikomentari oleh ikon font @ CodeMouse92 mengacaukan pembaca layar (dan mungkin buruk untuk SEO). Jadi lebih tepatnya berpegang pada SVG.
sumber
Topeng SVG pada elemen kotak dengan warna latar akan menghasilkan:
Catatan - Topeng SVG tidak didukung di browser Internet Explorer
sumber
Anda dapat mengubah pewarnaan SVG dengan css jika Anda menggunakan beberapa trik. Saya menulis naskah kecil untuk itu.
kode di atas mungkin tidak berfungsi dengan benar, saya sudah menerapkan ini untuk elemen dengan gambar latar belakang svg yang bekerja hampir mirip dengan ini. Tapi bagaimanapun Anda harus memodifikasi skrip ini agar sesuai dengan kasus Anda. Semoga ini bisa membantu.
sumber
Targetkan jalur di dalam svg:
Anda dapat melakukan inline, seperti:
Atau
sumber
Untuk hanya mengubah warna svg:
Pergi ke file svg dan di bawah gaya, sebutkan warna dalam isian.
sumber
Jika Anda ingin melakukan ini pada svg inline yang, misalnya, gambar latar belakang di css Anda:
tentu saja, ganti ... dengan kode gambar sebaris Anda
sumber
Misalnya, dalam HTML Anda:
Gunakan jQuery:
sumber
Sebenarnya, ada solusi yang lebih fleksibel untuk masalah ini: menulis Komponen Web yang akan menambal SVG sebagai teks dalam runtime. Juga diterbitkan di intisari dengan tautan ke JSFiddle
sumber
Cara yang kompatibel dengan Bootstrap terpendek, tanpa JavaScript:
dan gunakan seperti:
sumber
Buka gambar Anda menggunakan browser, klik kanan pada gambar klik pada sumber halaman lihat dan Anda akan melihat tag svg gambar. Atasi dan rekatkan ke html Anda, lalu ubah isi sesuai warna pilihan Anda
sumber
Cukup tambahkan isi: "warna yang diinginkan" di tag svg gambar: contoh:
sumber