Jak zastosować styl do osadzonego SVG?

Gdy SVG jest bezpośrednio zawarte w dokumencie za pomocą znacznika <svg>, można zastosować style CSS do SVG za pośrednictwem arkusza stylów dokumentu. Jednak próbuję zastosować styl do SVG, który jest osadzony (przy użyciu znacznika <object>).Jak zastosować styl do osadzonego SVG?

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

Źródło

2011-02-05 Joshua Sortino

wymyśliłem lekkiej drodze do tego, które działają świetnie za to, co staramy się robić zrobić. Zobacz te pytania i odpowiedzi: http://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement/ –

Krótka odpowiedź: nie, ponieważ style nie mają zastosowania w obrębie granic dokumentu.

Ponieważ jednak masz znacznik <object>, możesz wstawić arkusz stylów do dokumentu svg przy użyciu skryptu.

Coś takiego, i pamiętać, że kod ten zakłada, że <object> został załadowany w pełni:

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ż, aby wstawić element <link> odwołać arkusza stylów zewnętrzna:

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, wstawienie elementu stylu, a następnie dodanie reguły @import, np. styleElement.textContent = "@import url(my-style.css)".

Oczywiście można również bezpośrednio połączyć się z arkuszem stylów z pliku svg, bez wykonywania żadnych skryptów. Każda z poniższych powinno działać:

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

czyli

<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: dla zastosowania js skrypty i style CSS osadzonego SVG można użyć jquery-svg wtyczki.

Źródło

2011-02-05 11:30:57

Czy to metoda łączenia zewnętrzny arkusz stylów? Jeśli nie, czy to możliwe? –

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

To całkiem niezły Erik! Nie udało mi się jednak uruchomić tej sztuczki w Chrome bez włączania svgweb: http://code.google.com/p/svgweb/ ... Czy coś jest nie tak? –

Możesz to zrobić bez javsscrpt, umieszczając blok stylów ze stylami wewnątrz samego pliku SVG.

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

Źródło

2016-05-25 11:43:22

Jak zastosować styl do osadzonego SVG?

Odpowiedz

Powiązane problemy