Wie wende ich einen Stil auf eine eingebettete SVG an?

107

Wenn eine SVG mithilfe des <svg>Tags direkt in ein Dokument aufgenommen wird , können Sie CSS-Stile über das Stylesheet des Dokuments auf die SVG anwenden. Ich versuche jedoch, einen Stil auf eine eingebettete SVG anzuwenden (mithilfe des <object>Tags).

Ist es möglich, etwas wie den folgenden Code zu verwenden?

object svg { 
    fill: #fff; 
}
html css svg Joshua Sortino
quelle
1
Ich habe mir einen leichten Weg ausgedacht, um dies zu tun, der für das, was Sie versuchen, großartig funktionieren würde. Siehe diese Q & A: stackoverflow.com/questions/11978995/…
Drew Baker
Hier ist eine Antwort , die den Job tatsächlich erledigt (durch
Bearbeiten der

Antworten:

108

Kurze Antwort: Nein, da Stile nicht über Dokumentgrenzen hinweg gelten.

Da Sie jedoch ein <object>Tag haben, können Sie das Stylesheet mithilfe eines Skripts in das SVG-Dokument einfügen.

So etwas wie das, und beachten Sie, dass dieser Code davon ausgeht, dass der <object>vollständig geladen wurde:

var svgDoc = yourObjectElement.contentDocument;
var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style");
styleElement.textContent = "svg { fill: #fff }"; // add whatever you need here
svgDoc.getElementById("where-to-insert").appendChild(styleElement);

Es ist auch möglich, ein <link>Element einzufügen , um auf ein externes Stylesheet zu verweisen:

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

Eine weitere Option besteht darin, die erste Methode zu verwenden, ein Stilelement einzufügen und dann eine @ import-Regel hinzuzufügen, z styleElement.textContent = "@import url(my-style.css)".

Natürlich können Sie auch direkt aus der SVG-Datei auf das Stylesheet verlinken, ohne Skripte zu erstellen. Beides sollte funktionieren:

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

Update 2015: Sie können das jquery-svg- Plugin verwenden, um js-Skripte und CSS-Stile auf eine eingebettete SVG anzuwenden.

Erik Dahlström
quelle
Ist dies eine Methode zum Verknüpfen eines externen Stylesheets? Wenn nicht, ist das möglich?
Joshua Sortino
Das obige fügt ein Stilelement in das SVG ein. Ja, es ist auch möglich, ein xhtml-Linkelement zum Verknüpfen mit einem externen Stylesheet oder möglicherweise eine Anweisung zur Verarbeitung von xml-Stylesheets einzufügen (siehe w3.org/Style/styling-XML.html ).
Erik Dahlström
Das ist ziemlich großartig, Erik! Ich konnte diesen Trick jedoch nicht in Chrome zum Laufen bringen, ohne svgweb einzuschließen: code.google.com/p/svgweb ... Irgendeine Idee, was ich falsch mache?
Matt WD
1
@ MattW-D: Du solltest wahrscheinlich einfach eine neue Frage dafür aufschlagen. Svgweb wird in Chrom nicht benötigt.
Erik Dahlström
Vielen Dank, Erik, hatte wirklich Mühe, Font-Face in SVG über CSS zum Laufen zu bringen. Das Verknüpfen des CSS mit dem SVG funktionierte beim ersten Versuch und überquerte auf wundersame Weise den Browser!
Dave
10

Sie können dies ohne javsscrpt tun, indem Sie einen Stilblock mit Ihren Stilen in die SVG-Datei selbst einfügen.

<style type="text/css">
 path,
 circle,
 polygon { 
    fill: #fff; 
  }
</style>
R Reveley
quelle
3

Wenn der einzige Grund für die Verwendung des Tags zum Einschließen der SVG darin besteht, dass Sie Ihren Quellcode nicht mit dem Markup aus der SVG überladen möchten, sollten Sie sich SVG-Injektoren wie SVGInject ansehen .

Die SVG-Injektion verwendet Javascript, um eine SVG-Datei in Ihr HTML-Dokument einzufügen. Dies ermöglicht einen sauberen HTML-Quellcode, während die SVGs mit CSS vollständig stilisiert werden können. Ein einfaches Beispiel sieht so aus:

<html>
<head>
  <script src="svg-inject.min.js"></script>
</head>
<body>
  <img src="image.svg" onload="SVGInject(this)" />
</body>
</html>
Waruyama
quelle
Genial! Danke für das nette Tool.
Deleplace