Können CSS-Stile auf SVGs angewendet werden, die in ein „Tag' eingebettet sind?

CSS-Stil eingebetteter SVGs

Anwenden von CSS-Stilen auf ein SVG, das direkt in einem Dokument enthalten ist, mithilfe der Funktion

Kurze Antwort: Nein

CSS-Stile überschreiten keine Dokumentgrenzen. Ein Tag erstellt in diesem Fall effektiv eine Grenze zwischen dem enthaltenden Dokument und der eingebetteten SVG-Datei.

Alternative Ansätze

Glücklicherweise gibt es alternative Methoden, um eingebettete SVGs zu formatieren:

1. Programmatisches Stylesheet-Einfügen:

Mithilfe von JavaScript kann das Stylesheet direkt in das SVG-Dokument innerhalb der

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. Externe Stylesheet-Referenzierung:

A Element kann eingefügt werden, um auf ein externes Stylesheet zu verweisen:

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

Die erste Methode kann verwendet werden, um ein Stilelement einzufügen und anschließend eine @import-Regel hinzuzufügen:

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

4. Direkte SVG-Stylesheet-Verknüpfung:

Die SVG-Datei selbst kann direkt auf ein Stylesheet verweisen:

<?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. jquery-svg-Plugin:

Das jquery-svg-Plugin bietet einen alternativen Ansatz zum Anwenden von JavaScript- und CSS-Stilen auf eingebettete SVGs.

Das obige ist der detaillierte Inhalt vonKönnen CSS-Stile auf SVGs angewendet werden, die in ein „Tag' eingebettet sind?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!