如何更改CSS內容屬性中SVG圖像的顏色？

我想通過內容屬性中使用SVG圖像作爲一個CSS精靈，bootstrap-style，就像這樣：如何更改CSS內容屬性中SVG圖像的顏色？

i.rectangle-image { 
    content: url(rectangle.svg); 
}

，這裏是我的SVG：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> 
    <rect x="10" y="10" width="80" height="80"/> 
</svg>

，並提出HTML：

<div><i class="rectangle-image"></i> Hello, world!</div>

我希望能夠在我的應用程序中重新着色SVG，例如讓圖標在某些位置顯示爲紫色，在其他位置顯示爲白色。我知道我可以通過在<rect>標記上設置不同的三個不同的SVG文件（或數據URI）來實現此目的，但我想知道是否有方法通過CSS在我的HTML中執行此操作？

我試着給i.rectangle-image選擇器添加一個fill屬性，但這不起作用。我看過this answer，這不是我想要的。他們建議在整個頁面中嵌入SVG，如果可能的話，我寧願通過CSS content來做到這一點。有什麼想法嗎？我運氣不好嗎？

來源

2013-05-03 Jonathan

[這是你的東西你'尋找？]（http://codepen.io/Elbone/pen/fHCjs） – MMM 2013-05-03 11:43:43

如果您使用CSS內容工具，則基本上將SVG數據加載爲圖像。出於隱私的原因，您不能使用外部CSS或JavaScript來影響圖片的顯示方式。

如果要更改SVG數據的內容，您必須通過<object>或標記加載它，或者將其內聯放在HTML文件中。

來源

2013-05-03 11:47:14

謝謝你。你完全正確。我最終創建了一個自定義Web字體來處理它。 – Jonathan 2013-06-04 10:30:19

@Jonathan謝謝你的建議。奇蹟般有效：）！ – 2016-12-03 11:39:03

怎麼樣給SVG透明度和使用CSS背景色填充背景？

從@MMM的sugested解決方案看起來不錯：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="13px" height="12.917px" viewBox="0 0 13 12.917" enable-background="new 0 0 13 12.917" xml:space="preserve"> 
     <polygon fill="#000000" points="6.504,0 8.509,4.068 13,4.722 9.755,7.887 10.512,12.357 6.504,10.246 2.484,12.357 3.251,7.887 0,4.722 4.492,4.068 "/> 
     <script> 
     document.getElementsByTagName("polygon")[0].setAttribute("fill", location.hash); 
     </script> 
</svg>

http://jsbin.com/usaruz/2/edit

http://codepen.io/Elbone/pen/fHCjs

來源

2013-05-03 11:56:17 abimelex

您可以使用SVG Image Editor工具來編輯在前端的顏色和複製代碼，並用它在那裏你想放置它，這需要很短的時間段..嘗試它肯定會工作出

來源

2013-05-22 11:21:25

如何更改CSS內容屬性中SVG圖像的顏色？

回答

相關問題