Heim >Web-Frontend >CSS-Tutorial >Wie kann ich eingebettete SVGs mit dem „'-Tag formatieren?
Wie kann ich eingebettete SVGs mit dem „'-Tag formatieren?
- Patricia ArquetteOriginal
- 2024-12-25 17:50:14666Durchsuche
Anwenden von Stilen auf eingebettete SVGs
Im Gegensatz zu SVGs, die direkt über das
Technische Erklärung
Stylesheets gelten nur innerhalb der Grenzen des Dokuments, in dem sie definiert sind. Eingebettete SVGs werden als separat betrachtet Dokumente, und daher können extern definierte Stile sie nicht beeinflussen.
Lösung: Skriptbasierter Stil Einfügung
Da das
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);
Dies setzt voraus, dass das
Alternative Ansätze
-
Stylesheet in SVG einbinden:Link zu einem externen Stylesheet von innen die SVG-Datei mit der Verarbeitungsanweisung ?xml-stylesheet oder einem Element im
Abschnitt. - JQuery-SVG-Plugin verwenden:Verwenden Sie das jQuery-SVG-Plugin, um JavaScript- und CSS-Stile auf eingebettete SVGs anzuwenden.
Direktes CSS Ausrichtung
Wenn die eingebettete SVG-Datei in einer separaten Datei gespeichert wird, können Sie CSS-Stile definieren, die auf Folgendes abzielen
object[data="my-embedded-svg.svg"] {
fill: #fff;
}
Dieser Ansatz wendet keine Stile auf das SVG selbst an, kann aber nützlich sein, um das Gesamterscheinungsbild des eingebetteten Elements anzupassen.
Das obige ist der detaillierte Inhalt vonWie kann ich eingebettete SVGs mit dem „'-Tag formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!