如何將樣式應用於嵌入式SVG？

當使用<svg>標記將SVG直接包含在文檔中時，可以通過文檔的樣式表將CSS樣式應用於SVG。但是，我試圖將樣式應用於嵌入的SVG（使用<object>標籤）。如何將樣式應用於嵌入式SVG？

是否有可能使用任何東西，如下面的代碼？

object svg { 
    fill: #fff; 
}

來源

2011-02-05 Joshua Sortino

我想出了一個輕量級的方式來做到這一點你正在嘗試做這將工作非常適合。看到這個問答： http://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement/ – 2012-08-16 00:16:01

簡答：不，因爲樣式不適用於文檔邊界。

但是，由於您有<object>標籤，因此可以使用腳本將樣式表插入到svg文檔中。

這樣的事情，並注意該代碼假定<object>完全加載：

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

它也可以插入一個<link>元素引用外部樣式表：

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

然而，另一個選擇是使用第一種方法插入樣式元素，然後添加@import規則，例如styleElement.textContent = "@import url(my-style.css)"。

當然，您也可以直接鏈接到svg文件中的樣式表，而無需執行任何腳本。以下任一應工作：

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

或：

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

更新2015：您可以使用jquery-svg插件應用JS腳本和CSS樣式嵌入SVG。

來源

2011-02-05 11:30:57

這是一個鏈接的方法一個外部樣式表？如果沒有，那可能嗎？ – 2011-02-06 00:33:35

你可以在沒有javsscrpt的情況下通過在SVG文件本身中放置一個包含樣式的樣式塊來完成此操作。

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

來源

2016-05-25 11:43:22

如何將樣式應用於嵌入式SVG？

回答

相關問題