Heim >Web-Frontend >CSS-Tutorial >Können CSS-Stile auf SVGs angewendet werden, die mit dem Tag „' eingebettet sind?
Können CSS-Stile auf SVGs angewendet werden, die mit dem Tag „' eingebettet sind?
- Mary-Kate OlsenOriginal
- 2024-12-24 22:16:15710Durchsuche
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
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!