Saya memiliki beberapa grafik SVG yang ingin saya ubah warnanya melalui style sheets eksternal saya - tidak secara langsung di dalam setiap file SVG. Saya tidak meletakkan grafik sebaris, tetapi menyimpannya di folder gambar saya dan mengarahkannya.
Saya telah menerapkannya dengan cara ini untuk memungkinkan tooltips bekerja, dan saya juga membungkus masing-masing dengan <a>
tag untuk memungkinkan tautan.
<a href='http://youtube.com/...' target='_blank'><img class='socIcon' src='images/socYouTube.svg' title='View my videos on YouTube' alt='YouTube' /></a>
Dan berikut adalah kode grafik SVG:
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="stylesheets/main.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
<g>
<path d="M28.44......./>
</g>
</svg>
Saya meletakkan yang berikut ini di file CSS eksternal saya (main.css):
.socIcon g {fill:red;}
Namun itu tidak berpengaruh pada grafik. Saya juga mencoba jalur .socIcon g {} dan jalur .socIcon {}.
Ada yang tidak beres, mungkin penerapan saya tidak mengizinkan modifikasi CSS eksternal, atau saya melewatkan satu langkah? Saya sangat menghargai bantuan Anda! Saya hanya perlu kemampuan untuk mengubah warna grafik SVG melalui stylesheet eksternal saya, tetapi saya tidak bisa kehilangan kemampuan tooltip dan tautan. (Saya mungkin bisa hidup tanpa tooltips.) Terima kasih!
svg { fill:red; }
atau beri nama kelas pada jalur Anda. Misalnya<path class="socIcon" d="M28.44 ..... />
ini harus melakukan trik.Jawaban:
File main.css Anda hanya akan berpengaruh pada konten SVG jika file SVG disertakan sebaris dalam HTML:
https://developer.mozilla.org/en/docs/SVG_In_HTML_Introduction
Jika Anda ingin menyimpan SVG dalam file, CSS perlu ditentukan di dalam file SVG.
Anda dapat melakukannya dengan tag gaya:
http://www.w3.org/TR/SVG/styling.html#StyleElementExample
Anda dapat menggunakan alat di sisi server untuk memperbarui tag gaya bergantung pada gaya aktif. Di ruby Anda bisa mencapai ini dengan Nokogiri. SVG hanyalah XML. Jadi mungkin ada banyak pustaka XML yang tersedia yang mungkin bisa mencapai ini.
Jika Anda tidak dapat melakukan itu, Anda hanya perlu menggunakannya seolah-olah mereka adalah PNG; membuat satu set untuk setiap gaya, dan menyimpan gaya mereka sebaris.
sumber
Anda dapat melakukan apa yang Anda inginkan, dengan satu peringatan (penting): jalur di dalam simbol Anda tidak dapat diberi gaya secara independen melalui CSS eksternal - Anda hanya dapat menyetel properti untuk seluruh simbol dengan metode ini. Jadi, jika Anda memiliki dua jalur dalam simbol Anda dan ingin mereka memiliki warna isian yang berbeda, ini tidak akan berhasil, tetapi jika Anda ingin semua jalur Anda sama, ini seharusnya berfungsi.
Di file html Anda, Anda menginginkan sesuatu seperti ini:
Dan di file SVG eksternal Anda menginginkan sesuatu seperti ini:
Tukar kelas pada
svg
tag (dalam html Anda) darifill-red
kefill-blue
dan ta-da ... Anda memiliki warna biru, bukan merah.Anda dapat menyiasati sebagian batasan untuk dapat menargetkan jalur secara terpisah dengan CSS eksternal dengan mencampur dan mencocokkan CSS eksternal dengan beberapa CSS sebaris di jalur tertentu, karena CSS sebaris akan diutamakan. Pendekatan ini akan bekerja jika Anda melakukan sesuatu seperti ikon putih dengan latar belakang berwarna, di mana Anda ingin mengubah warna latar belakang melalui CSS eksternal tetapi ikon itu sendiri selalu putih (atau sebaliknya). Jadi, dengan HTML yang sama seperti sebelumnya dan sesuatu seperti kode svg ini, Anda akan mendapatkan latar belakang merah dan jalur latar depan putih:
sumber
symbol
elemen, yaitu Anda dapat memberikannyaid
ke elemen svg, jadi: `<svg id = example" xmlns = " w3.org/2000/svg " viewBox = "0 0256 256 "> <path class =" background "d =" M120 ... "/> <path class =" icon "style =" fill: white; "d =" M20 ... "/> </ svg > ``Anda dapat memasukkan tautan file SVG ke file css eksternal menggunakan:
Anda harus meletakkan ini setelah tag pembuka:
Ini bukan solusi sempurna, karena Anda harus memodifikasi file svg, tetapi Anda memodifikasinya sekali dan semua perubahan gaya dapat dilakukan dalam satu file css untuk semua file svg.
sumber
Dimungkinkan untuk menata SVG dengan secara dinamis membuat elemen gaya dalam JavaScript dan menambahkannya ke elemen SVG. Hacky, tapi berhasil.
Anda dapat membuat JavaScript secara dinamis di PHP jika Anda mau - fakta bahwa hal ini dimungkinkan dalam JavaScript membuka banyak sekali kemungkinan.
sumber
Salah satu pendekatan yang dapat Anda lakukan hanyalah menggunakan filter CSS untuk mengubah tampilan grafik SVG di browser.
Misalnya, jika Anda memiliki grafik SVG yang menggunakan warna isian merah di dalam kode SVG, Anda dapat mengubahnya menjadi ungu dengan pengaturan hue-rotate 180 derajat:
Bereksperimenlah dengan pengaturan hue-rotate lainnya untuk menemukan warna yang Anda inginkan.
Untuk memperjelas, CSS di atas masuk ke dalam CSS yang diterapkan ke dokumen HTML Anda. Anda memberi gaya pada tag img dalam kode HTML, bukan memberi gaya pada kode SVG.
Dan perhatikan bahwa ini tidak akan berfungsi dengan grafik yang memiliki isian hitam atau putih atau abu-abu. Anda harus memiliki warna sebenarnya di sana untuk memutar corak warna itu.
sumber
Solusi yang sangat cepat untuk memiliki gaya dinamis dengan stylesheet css eksternal, jika Anda menggunakan
<object>
tag untuk menyematkan svg.Contoh ini akan menambahkan kelas ke
<svg>
tag root saat diklik pada elemen induk.file.svg:
html:
Jquery:
pada elemen induk klik:
lalu Anda dapat mengelola css Anda
svg.css:
sumber
Ini harus dapat dilakukan dengan terlebih dahulu membuat sebaris gambar svg eksternal. Kode di bawah ini berasal dari mengganti semua gambar SVG dengan SVG inline oleh Jess Frazelle.
sumber
Saat digunakan dalam
<image>
tag, SVG harus terkandung dalam satu file untuk alasan privasi. Bug bugzilla ini memiliki detail lebih lanjut tentang mengapa demikian. Sayangnya Anda tidak dapat menggunakan tag yang berbeda seperti<iframe>
karena itu tidak akan berfungsi sebagai tautan sehingga Anda harus menyematkan CSS di<style>
tag di dalam file itu sendiri.Satu cara lain untuk melakukannya adalah dengan memiliki data SVG di dalam file html utama yaitu
Anda dapat mengatur gaya itu dengan file CSS eksternal menggunakan
<link>
tag HTML .sumber
Saya menyarankan Anda untuk menggunakan PHP untuk ini. Benar-benar tidak ada cara yang lebih baik untuk melakukan ini tanpa font ikon, dan jika Anda menolak menggunakannya, Anda dapat mencoba ini:
Dan nanti Anda bisa menggunakan file ini
filename.php?color=#ffffff
untuk mendapatkan file svg dengan warna yang diinginkan.sumber
if (!preg_match('/^[#][0-9a-f]{6}$/i', $_GET['color'])) die('Oops!');
(letakkan di suatu tempat di blok awal PHP).Apa yang berhasil untuk saya: tag gaya dengan aturan @import
sumber
Saya tahu ini posting lama, tetapi hanya untuk menyelesaikan masalah ini ... Anda hanya menggunakan kelas Anda di tempat yang salah: D
Pertama-tama Anda bisa menggunakan
di dalam dirimu
main.css
untuk membuatnya merah. Ini memang berpengaruh. Anda juga dapat menggunakan pemilih node untuk mendapatkan jalur tertentu.Hal kedua adalah, Anda mendeklarasikan kelas ke
img
-Tag.Anda sebenarnya harus mendeklarasikannya di dalam SVG Anda. jika Anda memiliki jalur yang berbeda, tentu saja Anda dapat menentukan lebih lanjut.
sekarang Anda bisa mengubah warna dalam Anda
main.css
sepertisumber
<?xml-stylesheet href="stylesheets/main.css" type="text/css"?>
<?xml-stylesheet ... ?>
deklarasi di dalam SVG Anda. Saya rasa itu akan berhasil. Ini mirip dengan jawaban lain yang merekomendasikan bagian<link rel="stylesheet" ... >
dalam SVG. Ini juga memiliki masalah yang sama (Anda perlu memperbarui setiap SVG agar mengarah ke stylesheet, dan setiap perubahan nama atau lokasi stylesheet berarti harus mengubah semua SVG lagi).Catatan: Gaya Eksternal tidak akan berfungsi jika Anda menyertakan SVG di dalam
<img>
tag. Ini akan bekerja dengan sempurna di dalam<div>
tagsumber
@leo ini adalah versi angularJS, terima kasih lagi
sumber
Metode ini akan berfungsi jika svg dilihat di dalam browser web tetapi segera setelah kode ini diunggah ke server dan kelas untuk ikon svg diberi kode seolah-olah itu adalah gambar latar belakang warnanya hilang dan kembali ke warna default . Sepertinya warna tidak dapat diubah dari style sheet eksternal meskipun kelas svg untuk warna dan kelas lapisan atas untuk tampilan dan posisi dari svg keduanya dipetakan ke direktori yang sama.
sumber