Tukar warna SVG semasa berlegar

SVG mempunyai pelbagai kaedah aplikasi, dan mengikut kaedah aplikasi yang berbeza, strategi warna menukar SVG di negeri -negeri yang berbeza (hover: hover, pengaktifan: aktif, fokus: fokus, perubahan nama kelas, dll) juga berbeza. Mari kita lihat secara berasingan:

Inline svg

SVG Inline adalah cara kegemaran saya untuk menggunakan SVG, sebahagiannya kerana ia mudah diakses dan gaya.

Jika anda biasa menggunakan fon ikon, anda mungkin suka sedikit perubahan warna mudah mereka. Fon ikon agak terhad kepada monokrom, sementara SVG tidak, tetapi masih, sangat mudah untuk mengubah monokrom fon ikon. Menggunakan SVG inline membolehkan anda menetapkan harta fill , yang akan dilancarkan ke semua elemen dalam SVG, atau anda boleh mengisi setiap elemen secara berasingan jika diperlukan.

Simbol/penggunaan SVG

Terdapat gambarajah sprite SVG yang dipanggil, yang merupakan satu set penukaran untuk<symbol></symbol> Svg elemen supaya ikon yang diberikan dapat berlalu<use></use> Unsur -unsur mudah dirujuk.

Anda masih boleh dengan mudah menetapkan warna isi melalui CSS luaran, tetapi terdapat beberapa nota:

• Elemen SVG dalaman (mis.<path></path> ) sendiri boleh tanpa padding. Ini membolehkan padding dilancarkan dari set SVG induk ke<use></use> The Shadow Dom dibuat. Sebaik sahaja anda masuk<symbol></symbol> Ditambah serupa<path ... fill="blue"></path> Anda kehilangan kawalan CSS luaran.
• Sekali lagi, anda tidak dapat mengawal pengisian elemen individu dalam SVG seperti yang anda lakukan dengan SVG sebaris. Ini bermakna anda pada dasarnya berada di kawasan monokrom. Ini meliputi kebanyakan kes penggunaan, tetapi masih menjadi batasan.

Imej latar belakang SVG

SVG boleh ditetapkan sebagai imej latar belakang seperti PNG, JPG, atau format grafik lain. Pada ketika ini, anda pada dasarnya menyerahkan keupayaan untuk menukar mengisi. Satu kemungkinan (saya tidak fikir ia sangat baik) adalah untuk menyediakan dua versi untuk setiap standard graf, menggunakan warna yang berbeza, dan kemudian beralih di antara mereka:

Saya tidak akan menyalahkan anda jika anda tidak mahu menukar sumber, jadi kemungkinan lain adalah menggunakan penapis kompleks.

Cuba menyesuaikan penapis yang betul untuk mendapatkan warna yang betul adalah perkara yang rumit. Nasib baik, Barrett Sonntag telah mencipta alat untuk membantu anda mengira penapis! Menukar hitam ke merah berakhir dengan kombinasi yang pelik, seperti: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) ;

SVG juga mempunyai harta object , yang sangat ringkas pada masa lalu kerana ia mempunyai mekanisme kejatuhan terbina dalam-walaupun sokongan penyemak imbas sangat baik pada hari-hari ini, saya tidak pernah menggunakannya. Tetapi jika anda menggunakannya, anda mungkin perlu menggunakan teknik penapis ini untuk menukar warna apabila melayang.

Gunakan topeng dan bukannya gambar latar belakang

Dengan cara ini, SVG masih bertanggungjawab untuk melukis bentuknya, tetapi warna itu berasal dari warna latar belakang di belakangnya (atau gambar! Atau kecerunan!) Daripada SVG itu sendiri.

Imej latar belakang svg sebagai url data

Ini tidak jauh berbeza dari kaedah di atas, tetapi ia menawarkan kemungkinan yang menarik: Gunakan pembolehubah untuk padding dalaman. Berikut adalah contoh menggunakan SASS untuk memastikan URL sebagai pembolehubah:

Anda juga boleh menggunakan sifat adat CSS asli untuk mencapai matlamat ini!

Atas ialah kandungan terperinci Tukar warna SVG semasa berlegar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!