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

Anwenden von CSS-Stilen auf eingebettete SVGs

Beim Einfügen einer SVG-Datei direkt in ein Dokument mit der Funktion

Kurze Antwort: Nein

CSS-Stile können keine Dokumentgrenzen überschreiten, einschließlich derjenigen zwischen dem Hauptdokument und dem eingebetteten SVG.

Alternative Lösungen

Da ein Wenn es sich um ein Stylesheet handelt, können Sie mithilfe von JavaScript ein Stylesheet in das SVG-Dokument einfügen. Hier ist ein Beispiel (vorausgesetzt, das

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

Zusätzlich können Sie einen einfügen. Element zu einem externen Stylesheet:

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

Direkte Verlinkung

Sie können das Stylesheet auch direkt aus der SVG-Datei verlinken, ohne Skripting:

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

Zusätzliche Option: JQuery-SVG Plugin

Stand 2015 können Sie JS-Skripte und CSS-Stile mit dem jquery-svg-Plugin auf eingebettete SVGs anwenden.

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