Bolehkah Gaya CSS Digunakan pada SVG yang Dibenamkan Menggunakan Teg ``?

Menggunakan Gaya CSS pada SVG Terbenam

Apabila memasukkan SVG terus ke dalam dokumen menggunakan

Jawapan Ringkas: Tidak

Gaya CSS tidak boleh melepasi sempadan dokumen, termasuk antara dokumen utama dan SVG terbenam.

Penyelesaian Alternatif

Sejak tag terlibat, anda boleh memasukkan lembaran gaya ke dalam dokumen SVG menggunakan JavaScript. Berikut ialah contoh (dengan mengandaikan telah dimuatkan sepenuhnya):

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

Selain itu, anda boleh memasukkan elemen ke helaian gaya luaran:

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);

Pautan Terus

Anda juga boleh memaut ke helaian gaya terus daripada fail SVG, tanpa skrip:

<?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>

Pilihan Tambahan: JQuery-SVG Pemalam

Sehingga 2015, anda boleh menggunakan skrip JS dan gaya CSS pada SVG terbenam menggunakan pemalam jquery-svg.

Atas ialah kandungan terperinci Bolehkah Gaya CSS Digunakan pada SVG yang Dibenamkan Menggunakan Teg ``?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!