Rumah >hujung hadapan web >tutorial css >Bagaimana untuk menukar warna SVG?
Bagaimana untuk menukar warna SVG?
- PHPzke hadapan
- 2023-09-01 21:09:022916semak imbas
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!