Heim >Web-Frontend >CSS-Tutorial >Wie kann ich eingebettete SVGs effektiv formatieren, wenn das direkte CSS-Styling begrenzt ist?
Wie kann ich eingebettete SVGs effektiv formatieren, wenn das direkte CSS-Styling begrenzt ist?
- Barbara StreisandOriginal
- 2024-12-23 03:16:17354Durchsuche
Gestaltung eingebetteter SVGs: CSS-Einschränkungen und alternative Ansätze
Übersicht
Gestaltung eingebetteter SVGs (Skalierbare Vektorgrafiken) kann im Vergleich zu direkt enthaltenen SVGs Herausforderungen darstellen in einem Dokument. Für ein effektives Styling ist es von entscheidender Bedeutung, die Einschränkungen zu verstehen und alternative Methoden zu erkunden.
Direktes CSS-Styling eingebetteter SVGs
Wenn ein SVG mit der Funktion
object svg {
fill: #fff;
}
Stile mit Skript einfügen
Da eingebettete SVGs separate Dokumente sind, können Stile mit Skript in sie eingefügt werden. Die folgende Methode geht davon aus, dass
var svgDoc = yourObjectElement.contentDocument;
var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style");
styleElement.textContent = "svg { fill: #fff }";
svgDoc.getElementById("where-to-insert").appendChild(styleElement);
Alternativ kann ein externes Stylesheet über die Funktion verlinkt werden. Element:
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);
Direktes Styling aus der SVG-Datei
Alternativ können Stile direkt verknüpft oder in die SVG-Datei eingebunden werden:
<?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>
oder
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<link href="my-style.css" type="text/css" rel="stylesheet"
xmlns="http://www.w3.org/1999/xhtml"/>
</defs>
... rest of document here ...
</svg>
Zusätzliche Option: jquery-svg Plugin
Für weitere Flexibilität bietet das Das jquery-svg-Plugin bietet Methoden zum Anwenden von CSS-Stilen und JavaScript-Skripten auf eingebettete SVGs.
Das obige ist der detaillierte Inhalt vonWie kann ich eingebettete SVGs effektiv formatieren, wenn das direkte CSS-Styling begrenzt ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!