Bagaimana untuk menukar warna SVG?
Scalable Vector Graphics (SVG) telah menjadi popular secara meluas sebagai format yang mampu menghasilkan grafik vektor berkualiti tinggi yang boleh diubah saiz pada sebarang saiz tanpa kehilangan. Manfaat tambahan menggunakan SVG ialah keupayaan untuk menukar warna grafik berdasarkan keutamaan tertentu. Jika anda ingin menyelaraskan nada tapak web anda atau memperhalusi palet warna untuk matlamat tertentu, mudah untuk mengubah suai warna SVG menggunakan CSS. Artikel ini akan memandu anda mengubah suai warna SVG langkah demi langkah, bermula daripada mengenal pasti elemen tertentu, hingga melaraskan warna itu sendiri. Sama ada anda seorang pereka web, pembangun atau pelajar yang ingin tahu yang ingin memperibadikan grafik SVG mereka, artikel ini berjanji untuk memberikan anda semua pengetahuan yang diperlukan untuk memulakan perjalanan anda.
Gunakan CSS untuk meletakkan elemen SVG
CSS bermaksud Cascading Style Sheets dan merupakan alat yang berpengaruh untuk menggayakan HTML dan juga boleh digunakan untuk menukar gaya grafik SVG. Untuk mengubah suai warna SVG, anda boleh menggunakan pemilih CSS untuk menyasarkan elemen tepat yang perlu diubah suai. Contohnya, jika anda ingin menukar warna isian semua laluan dalam SVG, anda boleh menggunakan peraturan CSS berikut -
svg path {
fill: red;
}
Ini akan menukar warna isian semua laluan dalam SVG kepada merah. Anda juga boleh menggunakan CSS untuk menyasarkan elemen tertentu dalam SVG mengikut ID atau kelas.
Ubah suai warna SVG
Adalah mungkin untuk mengubah suai rona elemen SVG kepada mana-mana rona CSS yang dibenarkan secara rasmi, sama ada teg tersuai untuk rona, sistem heks, RGB, RGBA, HSL, HSLA atau piawaian warna lain yang dibenarkan. Contohnya, anda boleh mengubah suai warna dalam laluan kepada rona tradisional (seperti "hijau") atau kod perenambelasan (seperti "#ff0000"). Anda juga boleh menentukan warna yang tepat melalui nilai RGB atau HSL, seperti "rgb(255, 0, 0)" atau "hsl(0, 100%, 50%)". Selain melaraskan warna isian elemen SVG, anda juga boleh mengubah suai warna lejang menggunakan sifat lejang dan bukannya sifat isian.
Timpa warna SVG
Sila ambil perhatian bahawa sesetengah fail SVG mungkin mengandungi gaya sebaris atau warna berkod keras, yang mungkin mengatasi peraturan CSS yang anda tentukan. Dalam kes ini, fail SVG mungkin perlu diubah suai untuk menghapuskan gaya atau warna ini. Anda boleh melakukan ini dengan membuka fail SVG dengan editor teks dan mencari nilai warna yang anda ingin ubah suai. Sebaik sahaja anda menemui gaya atau warna yang berkaitan, anda boleh mengalih keluar atau melaraskannya mengikut keinginan anda. Walau bagaimanapun, anda mesti berhati-hati untuk mengelakkan mengalih keluar sebarang kod atau teg penting yang boleh menjejaskan fungsi SVG.
Kaedah
Berikut adalah garis panduan yang boleh anda ikuti untuk menukar warna SVG anda -
Adalah penting untuk mengenal pasti elemen SVG khusus yang ingin anda ubah warna. Ini boleh dicapai dengan menggunakan alat pembangun dalam pelayar web anda untuk memeriksa elemen SVG.
Buat pengisytiharan CSS yang direka untuk mengubah suai warna elemen SVG tertentu atau berbilang elemen. Anda boleh menggunakan pemilih elemen seperti "svg", "path" atau "rect" untuk memfokuskan pada elemen tertentu atau menggunakan pemilih kelas atau pemilih ID untuk menyasarkan elemen tertentu secara lebih terperinci.
Dalam pengisytiharan CSS, tetapkan warna pilihan anda pada sifat isian untuk menukar warna isian SVG. Anda boleh mewakili warna menggunakan nama warna, kod heksadesimal atau nilai RGB.
Anda juga mempunyai pilihan untuk menentukan sifat lejang untuk menukar warna lejang SVG, atau menggunakan sifat CSS lain untuk membentuk SVG.
Jika anda menggunakan fail CSS luaran, gunakan elemen pautan di bahagian kepala dokumen HTML untuk memautkannya.
Simpan perubahan anda dan muat semula halaman untuk melihat warna SVG yang dikemas kini.
Contoh 1
Contoh di bawah akan menunjukkan cara menukar warna grafik SVG menggunakan CSS
<!DOCTYPE html>
<html>
<head>
<title>How to change SVG color?</title>
<style>
#my-svg path {
fill: green;
}
</style>
</head>
<body>
<h4>How to change SVG color?</h4>
<div>
<p>Before Color Change</p>
<svg width="100" height="100">
<path fill="#000000" d="M10 10 H 90 V 90 H 10 L 10 10"></path>
</svg>
</div>
<br>
<div>
<p>After Color Change</p>
<svg id="my-svg" width="100" height="100">
<path fill="#000000" d="M10 10 H 90 V 90 H 10 L 10 10"></path>
</svg>
</div>
</body>
</html>
Contoh 2
Contoh berikut menunjukkan proses menukar warna grafik SVG secara dinamik menggunakan JavaScript dan CSS.
<!DOCTYPE html>
<html>
<head>
<title>How to change SVG color?</title>
<style>
svg {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<h4>How to change SVG color?</h4>
<div>
<p>Before Color Change</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M6.1 3.3L4.7 4.7l6.2 6.2L2 17.6l1.4 1.4 4.6-4.6 6.2 6.2 1.4-1.4-6.2-6.2 6.2-6.2-1.4-1.4-4.6 4.6-2.5-2.5zM12 18c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z" />
</svg>
</div>
<br>
<div>
<p>After Color Change</p>
<svg id="my-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M6.1 3.3L4.7 4.7l6.2 6.2L2 17.6l1.4 1.4 4.6-4.6 6.2 6.2 1.4-1.4-6.2-6.2 6.2-6.2-1.4-1.4-4.6 4.6-2.5-2.5zM12 18c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z" />
</svg>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
$('#my-svg path').css('fill', 'red');
});
</script>
</body>
</html>
Kesimpulan
Untuk meringkaskan, menukar rona imej SVG ialah cara yang mudah namun berkesan untuk memperibadikan grafik anda agar sesuai dengan keperluan khusus anda. Dengan menggunakan CSS, anda boleh mengubah suai rona elemen tertentu dalam SVG atau keseluruhan imej dengan mudah. Dengan mengikut garis panduan yang dibentangkan dalam artikel ini, anda kini seharusnya mempunyai pemahaman yang menyeluruh tentang cara mengubah suai ton imej SVG dan boleh menggunakan pengetahuan ini untuk mencipta reka bentuk yang lebih estetik untuk halaman web atau projek anda. Perlu diingat bahawa imej SVG mempunyai beberapa kelebihan berbanding format imej lain, termasuk kebolehlarasan dan fleksibiliti, jadi dengan memasukkannya ke dalam reka bentuk anda boleh meningkatkan keupayaan pembangunan web anda dengan ketara. Kami berharap artikel ini memberi inspirasi kepada anda dan anda kini boleh mencuba palet SVG anda sendiri.
Atas ialah kandungan terperinci Bagaimana untuk menukar warna SVG?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Bekerja dengan Caching Graphql
Mar 19, 2025 am 09:36 AM
Sekiranya anda baru -baru ini mula bekerja dengan GraphQL, atau mengkaji semula kebaikan dan keburukannya, anda tidak akan ragu -ragu mendengar perkara seperti "Graphql tidak menyokong caching" atau
Menjadikan Peralihan Svelte Khas pertama anda
Mar 15, 2025 am 11:08 AM
API Peralihan Svelte menyediakan cara untuk menghidupkan komponen apabila mereka memasuki atau meninggalkan dokumen, termasuk peralihan svelte adat.
Tunjukkan, jangan beritahu
Mar 16, 2025 am 11:49 AM
Berapa banyak masa yang anda habiskan untuk merancang persembahan kandungan untuk laman web anda? Semasa anda menulis catatan blog baru atau membuat halaman baru, adakah anda memikirkan
Membina aplikasi Ethereum menggunakan redwood.js dan fauna
Mar 28, 2025 am 09:18 AM
Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum
Bagaimana anda menggunakan CSS untuk membuat kesan teks, seperti bayang -bayang teks dan kecerunan?
Mar 14, 2025 am 11:10 AM
Artikel ini membincangkan menggunakan CSS untuk kesan teks seperti bayang -bayang dan kecerunan, mengoptimumkannya untuk prestasi, dan meningkatkan pengalaman pengguna. Ia juga menyenaraikan sumber untuk pemula. (159 aksara)
Apa yang ada perintah npm?
Mar 15, 2025 am 11:36 AM
Perintah NPM menjalankan pelbagai tugas untuk anda, sama ada sebagai satu-satunya atau proses berjalan terus untuk perkara seperti memulakan pelayan atau menyusun kod.
Membuat Bragdoc anda sendiri dengan sebelas
Mar 18, 2025 am 11:23 AM
Tidak kira tahap tahap anda sebagai pemaju, tugas yang kami selesaikan -sama ada besar atau kecil -membuat kesan besar dalam pertumbuhan peribadi dan profesional kami.
Mari kita gunakan (x, x, x, x) untuk bercakap mengenai kekhususan
Mar 24, 2025 am 10:37 AM
Saya hanya berbual dengan Eric Meyer pada hari yang lain dan saya teringat cerita Eric Meyer dari tahun -tahun pembentukan saya. Saya menulis catatan blog mengenai kekhususan CSS, dan
