Jak zastosować styl do osadzonego SVG?

107

Gdy plik SVG jest bezpośrednio zawarty w dokumencie za pomocą <svg>znacznika, możesz zastosować style CSS do pliku SVG za pośrednictwem arkusza stylów dokumentu. Jednak próbuję zastosować styl do pliku SVG, który jest osadzony (za pomocą <object>tagu).

Czy można użyć czegoś takiego jak poniższy kod?

object svg { 
    fill: #fff; 
}

html css svg

— Joshua Sortino
źródło

Wymyśliłem lekki sposób na zrobienie tego, który świetnie sprawdziłby się w tym, co próbujesz zrobić. Zobacz te pytania i odpowiedzi: stackoverflow.com/questions/11978995/…

— Drew Baker

Oto odpowiedź, która faktycznie wykonuje zadanie (od Manipulowania właściwościami stylu zewnętrznego pliku SVG za pomocą CSS ).

— Fabien Snauwaert

Odpowiedzi:

108

Krótka odpowiedź: nie, ponieważ style nie mają zastosowania poza granicami dokumentu.

Jednakże, ponieważ masz <object>tag, możesz wstawić arkusz stylów do dokumentu svg za pomocą skryptu.

Coś takiego i zauważ, że ten kod zakłada, że plik <object>został w pełni załadowany:

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

Możliwe jest również wstawienie <link>elementu odwołującego się do zewnętrznego arkusza stylów:

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

Jeszcze inną opcją jest użycie pierwszej metody, aby wstawić element stylu, a następnie dodać regułę @import, np styleElement.textContent = "@import url(my-style.css)".

Oczywiście możesz również bezpośrednio linkować do arkusza stylów z pliku svg, bez wykonywania jakichkolwiek skryptów. Powinno działać jedno z poniższych:

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

lub:

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

Aktualizacja 2015: możesz użyć wtyczki jquery-svg do zastosowania skryptów js i stylów css do osadzonego SVG.

— Erik Dahlström
źródło

Czy to jest metoda łączenia zewnętrznego arkusza stylów? Jeśli nie, czy to możliwe?

— Joshua Sortino

Powyższe wstawia element stylu do pliku svg. Tak, możliwe jest również wstawienie elementu link xhtml w celu połączenia z zewnętrznym arkuszem stylów lub ewentualnie instrukcją przetwarzania arkusza stylów xml (patrz w3.org/Style/styling-XML.html ).

— Erik Dahlström

To niesamowite, Erik! Jednak nie udało mi się zmusić tej sztuczki do działania w Chrome bez dołączenia svgweb: code.google.com/p/svgweb ... Masz jakiś pomysł, co robię źle?

— Matt WD,

@ MattW-D: prawdopodobnie powinieneś po prostu otworzyć nowe pytanie. Svgweb nie jest potrzebny w Chrome.

— Erik Dahlström

Dziękuję Erik, naprawdę walczył, próbując zmusić font-face do pracy w svg przez css, łącząc css z svg działał jako pierwsza próba i cudownie między przeglądarkami!

— Dave

Możesz to zrobić bez javsscrpt, umieszczając blok stylu ze stylami w samym pliku SVG.

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

— R Reveley
źródło

Jeśli jedynym powodem używania znacznika do umieszczania SVG jest to, że nie chcesz zaśmiecać swojego kodu źródłowego znacznikami z SVG, powinieneś przyjrzeć się wtryskiwaczom SVG, takim jak SVGInject .

Wstrzykiwanie SVG wykorzystuje JavaScript do wstawiania pliku SVG w tekście do dokumentu HTML. Pozwala to na czysty kod źródłowy HTML, jednocześnie umożliwiając w pełni stylizowanie SVG za pomocą CSS. Podstawowy przykład wygląda następująco:

<html>
<head>
  <script src="svg-inject.min.js"></script>
</head>
<body>
  <img src="image.svg" onload="SVGInject(this)" />
</body>
</html>

— Waruyama
źródło

Niesamowite! Dzięki za zgrabne narzędzie.

— Deleplace