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.
Wenn ein SVG mit der Funktion
object svg {
fill: #fff;
}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);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>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!
Was bedeutet Intervall?
So brechen Sie die automatische Verlängerung von Baidu Netdisk ab
Welche Ausrüstung wird für die Douyin-Liveübertragung benötigt?
So stellen Sie vollständig gelöschte Dateien auf dem Computer wieder her
So geben Sie den Drucker in Win10 frei
So verbergen Sie die IP-Adresse
Einführung in die Überwachungsausrüstung von Wetterstationen
html zu txt
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
