Bagaimana untuk Menggayakan SVG Terpaut Luaran dengan CSS?

Cara Menggayakan SVG dengan CSS Luaran

Apabila menyimpan grafik SVG secara luaran dan mengaksesnya melalui pautan, menggayakannya melalui CSS luaran boleh menimbulkan cabaran. Dalam kes ini, fail CSS tidak boleh mengubah suai kandungan SVG secara langsung.

Had CSS Luaran

Fail CSS luaran anda, "main.css," hanya akan menjejaskan kandungan SVG jika ia disertakan sebaris dalam HTML. Ini bermakna bahawa coretan kod berikut:

<a href="http://youtube.com/..." target="_blank">
  <img class="socIcon" src="images/socYouTube.svg" title="View my videos on YouTube" alt="YouTube" />
</a>

tidak akan terjejas oleh CSS dalam "main.css."

Menggunakan Gaya Dalam SVG

Untuk menggayakan SVG yang disimpan secara luaran, anda perlu menentukan CSS dalam fail SVG itu sendiri. Anda boleh menggunakan teg gaya:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="50px" height="50px" viewBox="0 0 50 50">
  <defs>
    <style type="text/css"><![CDATA[
      .socIcon g {
        fill: red;
      }
    ]]></style>
  </defs>
  <g>
    <path d="M28.44......."/>
  </g>
</svg>

Sebagai alternatif, anda boleh menggunakan alat sisi pelayan, seperti Nokogiri dalam Ruby, untuk mengemas kini teg gaya berdasarkan gaya aktif.

Pilihan Sandaran

Jika tiada penyelesaian di atas boleh dilaksanakan, anda boleh menggunakan sebaris SVG atau mencipta PNG berasingan dengan gaya berbeza.

Atas ialah kandungan terperinci Bagaimana untuk Menggayakan SVG Terpaut Luaran dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!