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

Penggayaan CSS SVG Terbenam

Menggunakan gaya CSS pada SVG yang disertakan secara langsung dalam dokumen menggunakan

Jawapan Ringkas: Tidak

Gaya CSS tidak melintasi sempadan dokumen. Satu tag, dalam kes ini, berkesan mewujudkan sempadan antara dokumen yang mengandungi dan SVG terbenam.

Pendekatan Alternatif

Nasib baik, terdapat kaedah alternatif untuk menggayakan SVG terbenam:

1. Sisipan Lembaran Gaya Terprogram:

Menggunakan JavaScript, lembaran gaya boleh dimasukkan terus ke dalam dokumen SVG dalam tag. Ini menganggap telah dimuatkan sepenuhnya.

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

2. Rujukan Lembaran Gaya Luaran:

Satu elemen boleh dimasukkan untuk merujuk lembaran 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);

3. CSS Import (@import Rule):

Kaedah pertama boleh digunakan untuk memasukkan elemen gaya dan seterusnya menambah peraturan @import:

styleElement.textContent = "@import url(my-style.css)";

4. Pemautan Lembaran Gaya SVG Terus:

Fail SVG itu sendiri boleh merujuk terus lembaran gaya:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="my-style.css" type="text/css"?>
<svg xmlns="http://www.w3.org/2000/svg">
  ... (SVG content) ...
</svg>

5. Pemalam jquery-svg:

Pemalam jquery-svg menyediakan pendekatan alternatif untuk menggunakan gaya JavaScript dan CSS pada SVG terbenam.

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