什麼是在CSS中實現SVG圖像文件的正確方法？

我有一個SVG文件與多個SVG與唯一的ID。什麼是在CSS中實現SVG圖像文件的正確方法？

<g id="tags"> 
... 
</g> 
<g id="tags2"> 
... 
</g>

到目前爲止，我已經試圖執行沒有運氣這兩種方式。我試圖用背景位置設置它。

.icon { 
    background-image: url(/img/glyphicons_pro/glyphicons/svg/glyphicons.svg); 
    background-repeat: no-repeat; 
    background-size: 100%; 
} 

.icon.tags-icon { 
    background-position: 0px 0px; 
    width: 12px; 
    height: 12px; 
}

而且我試着在最後加上SVG的ID，這似乎也不起作用。

.icon.tags-icon { 
    background-image: url(/img/glyphicons_pro/glyphicons/svg/glyphicons.svg#tags); 
    background-repeat: no-repeat; 
    background-size: 80%; 
}

我一直在尋找了幾個小時，似乎無法找到正確的方法來此...

來源

2013-02-02 coryj

Firefox和IE不支持將SVG作爲CSS背景圖片AFAIK – David

Firefox和IE *支持SVG作爲CSS背景，與其他所有其他UA一樣 –

你可以使用svg fragment identifiers顯示不同地區的假設不同<g>元素在不同位置例如

<html> 
<body> 
<embed src="shapes.svg#svgView(viewBox(50,0,100,100))" style="width:100px;  height:100px" type="image/svg+xml" /> 
<embed src="shapes.svg#svgView(viewBox(0,200,100,100))" style="width:100px;height:100px" type="image/svg+xml"/> 
<embed src="shapes.svg#svgView(viewBox(0,400,100,100))" style="width:100px;height:100px" type="image/svg+xml"/> 
</body> 
</html>

上面的例子示出了嵌入但這個想法同樣適用於背景圖像。

另一種方式是SVG Stacks，它將所有圖形放在一起，然後只顯示一個你想用CSS看到的圖形。

來源

2013-02-02 21:21:46

什麼是在CSS中實現SVG圖像文件的正確方法？

回答

相關問題