Bagaimanakah Saya Boleh Menggayakan SVG Terbenam dengan Berkesan Apabila Penggayaan CSS Terus Terhad?

Menggayakan SVG Terbenam: Had CSS dan Pendekatan Alternatif

Gambaran Keseluruhan

Menggayakan SVG Terbenam (Grafik Vektor Boleh Skala) boleh memberikan cabaran yang disertakan secara langsung berbanding dengan SVG dalam dokumen. Memahami had dan meneroka kaedah alternatif adalah penting untuk penggayaan yang berkesan.

Penggayaan CSS Terus SVG Terbenam

Apabila SVG dibenamkan menggunakan tag, gaya CSS tidak boleh digunakan terus daripada helaian gaya dokumen. Ini kerana gaya CSS tidak merentasi sempadan dokumen.

object svg {
    fill: #fff;
}

Menyuntik Gaya Menggunakan Skrip

Memandangkan SVG terbenam adalah dokumen yang berasingan, gaya boleh disuntik ke dalamnya menggunakan skrip. Kaedah berikut menganggap telah dimuatkan sepenuhnya:

var svgDoc = yourObjectElement.contentDocument;
var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style");
styleElement.textContent = "svg { fill: #fff }";
svgDoc.getElementById("where-to-insert").appendChild(styleElement);

Sebagai alternatif, lembaran gaya luaran boleh dipautkan menggunakan elemen:

var svgDoc = yourObjectElement.contentDocument;
var linkElm = svgDoc.createElementNS("http://www.w3.org/1999/xhtml", "link");
linkElm.setAttribute("href", "my-style.css");
linkElm.setAttribute("type", "text/css");
linkElm.setAttribute("rel", "stylesheet");
svgDoc.getElementById("where-to-insert").appendChild(linkElm);

Penggayaan Terus daripada Fail SVG

Sebagai alternatif, gaya boleh dipautkan terus atau disertakan dalam fail SVG:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="my-style.css" type="text/css"?>
<svg xmlns="http://www.w3.org/2000/svg">
  ... rest of document here ...
</svg>

atau

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <link href="my-style.css" type="text/css" rel="stylesheet" 
          xmlns="http://www.w3.org/1999/xhtml"/>
  </defs>
  ... rest of document here ...
</svg>

Pilihan Tambahan: jquery-svg Pemalam

Untuk fleksibiliti lanjut, pemalam jquery-svg menyediakan kaedah untuk menggunakan gaya CSS dan skrip JavaScript pada SVG terbenam.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan SVG Terbenam dengan Berkesan Apabila Penggayaan CSS Terus Terhad?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!