Untuk gaya SVG dengan CSS, anda mesti terlebih dahulu membenamkan SVG dalam talian ke HTML untuk kawalan halus. 1. SVG inline membolehkan untuk secara langsung memilih unsur -unsur dalamannya seperti atau dan gunakan gaya melalui CSS, manakala SVG luaran hanya menyokong gaya global seperti lebar dan ketinggian atau penapis. 2. Gunakan sintaks CSS biasa seperti .class: hover untuk mencapai kesan interaktif, tetapi gunakan mengisi bukan warna untuk mengawal warna, dan gunakan strok dan lebar strok untuk mengawal garis besar. 3. Gunakan nama kelas untuk menyusun gaya untuk mengelakkan pertindihan dan memberi perhatian kepada penamaan konflik dan pengurusan skop. 4. Gaya SVG boleh mewarisi dari halaman, dan boleh ditetapkan semula melalui svg * {fill: none; Strok: Tiada; } Untuk mengelakkan hasil yang tidak dijangka. Selepas menguasai perkara -perkara utama ini, anda boleh menggunakan CSS dengan cekap untuk mengawal gaya SVG.

SVGs ada di mana -mana hari ini -logos, ikon, ilustrasi -dan salah satu faedah besar ialah anda boleh gaya mereka dengan CSS seperti elemen HTML. Ia menjadikan mereka fleksibel dan mudah diintegrasikan ke dalam reka bentuk web moden. Tetapi jika anda telah cuba memohon gaya ke SVG dan berlari ke dalam isu, anda tidak bersendirian. Terdapat beberapa gotchas untuk mengetahui.

Sebaris SVG vs SVG luaran

Bagaimana anda memasukkan SVG anda dalam halaman mempengaruhi bagaimana anda boleh menggayakannya.

• Inline SVG : Ini bermakna menampal kod sebenar <svg></svg> terus ke HTML anda. Plus besar di sini ialah anda boleh menyasarkan unsur -unsurnya (seperti <path></path> , <circle></circle> , dll) secara langsung dengan CSS.
• SVG luaran : Jika anda memuatkan SVG melalui tag <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175211922987577.png" class="lazy" alt="Memohon gaya CSS ke grafik vektor berskala (SVG)" > atau imej latar belakang dalam CSS, anda kehilangan akses langsung ke elemen dalaman. Dalam kes ini, anda hanya boleh menggunakan gaya global seperti lebar, ketinggian, atau penapis dari luar.

Oleh itu, jika anda mahu kawalan halus terhadap warna, animasi, atau kesan hover di dalam SVG, pergi sejajar.

Elemen SVG Gaya dengan CSS

Sebaik sahaja SVG anda sejajar, anda boleh merawat banyak elemennya seperti HTML biasa ketika datang ke gaya.

Sebagai contoh, anda mungkin mempunyai logo di mana anda mahu bentuk utama menukar warna pada hover:

 <svg>
  <path class = "logo-main" d = "m10 10 ..." />
</svg>

Dan di CSS anda:

 .logo-main {
  Isi: #333;
}

.Logo-Main: Hover {
  Isi: #09F;
}

Beberapa perkara penting:

• Gunakan fill bukan color atau background-color untuk bentuk dan laluan.
• stroke mengawal garis besar, dan stroke-width menyesuaikan ketebalan mereka.
• Anda juga boleh menghidupkan sifat -sifat ini dengan peralihan atau kerangka utama.

Perlu diingat bahawa beberapa pelayar yang lebih tua mungkin mempunyai sokongan terhad untuk ciri -ciri CSS tertentu yang digunakan untuk SVG.

Menggunakan kelas dan gaya scoped

Seperti dengan HTML, anda boleh menggunakan kelas di dalam SVG untuk mengatur gaya dan elakkan mengulangi diri anda.

Katakan SVG anda mempunyai beberapa bahagian:

 <svg>
  <Circle class = "dot primer" cx = "50" cy = "50" r = "10" />
  <Circle class = "dot secondary" cx = "100" cy = "50" r = "10" />
</svg>

Anda boleh menentukan gaya yang boleh diguna semula di CSS anda:

 .dot {
  Peralihan: Isi 0.3s mudah;
}

.primary {
  Isi: merah;
}

.secondary {
  Isi: Biru;
}

Beberapa petua:

• Pastikan nama kelas anda tidak bertembung dengan gaya lain pada halaman.
• Pertimbangkan membungkus SVG dalam bekas dan menggunakan gaya scoped jika diperlukan.
• BEM atau konvensyen penamaan yang serupa dapat membantu menjaga perkara yang teratur.

Pendekatan ini menjadikan kod anda bersih dan dapat dipelihara, terutamanya apabila SVGs menjadi lebih kompleks.

Berhati -hati untuk kekhususan dan warisan

Unsur -unsur SVG boleh mewarisi gaya dari halaman, yang berguna tetapi kadang -kadang mengelirukan.

Sebagai contoh, jika anda menetapkan warna fill pada elemen <svg> itu sendiri, unsur -unsur kanak -kanak tanpa fill sendiri akan memilihnya secara automatik. Yang berguna untuk bertemakan:

 svg {
  Isi: CurrentColor;
}

Kemudian anda hanya boleh menukar harta color di tempat lain, dan SVG mengikuti.

Tetapi ini juga bermakna keputusan yang tidak dijangka boleh muncul jika anda tidak berhati -hati dengan kekhususan pemilih atau peraturan yang bercanggah. Caranya yang baik adalah untuk menetapkan semula gaya yang diwarisi apabila diperlukan:

 svg * {
  Isi: Tiada;
  Strok: Tiada;
}

Dengan cara itu, anda mula segar dan menentukan dengan tepat apa yang anda mahukan.

Pada dasarnya itu sahaja. SVG Styling dengan CSS berkuasa apabila anda tahu bagaimana ia berfungsi, tetapi ia memerlukan perhatian kepada bagaimana atribut SVG memetakan ke sifat CSS dan bagaimana fail dimasukkan ke dalam halaman.

Atas ialah kandungan terperinci Memohon gaya CSS ke grafik vektor berskala (SVG). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!