使用CSS插入和從spritesheet

我使用svg-sprite生成一個SVG spritesheet通過<use>方法被嵌入顏色的SVG：使用CSS插入和從spritesheet

<svg class="icon"> 
    <use xlink:href="/assets/icons.svg#phone"/> 
</svg>

這工作得很好了通過HTML標記嵌入和樣式圖標。

但是，我也需要選擇純粹通過CSS嵌入圖標。例如，通過CMS WYSIWYG編輯器添加內容列表不應該要求內容編輯器添加額外的SVG元素。

例如：

<ul class="icon-list"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
</ul> 

.icon-list li::before { /* icon here */ }

有沒有辦法與<use>嵌入方法，或類似的方法來實現這一目標？該解決方案還需要允許通過CSS對SVG進行着色。

來源

2016-11-22 Matt Stone

如果我正確理解你的問題，基本答案是否定的。

您可以在CSS中包含一個SVG圖標，就像您可以位圖一樣。例如background-image。但由於瀏覽器隱私限制，它必須是自包含的。它不能使用<use>來引用外部SVG元素。或者實際上任何外部對象 - 例如其他圖像，字體等。

它也不能用外部CSS樣式化。因此，例如，如果您需要同一圖標的不同顏色變體，則需要爲每種顏色創建一個單獨的SVG。

來源

2016-11-22 11:45:36

謝謝，可悲的是你的答案與我目前的研究結果相符。我還沒有發現其他人真的認識到這個問題。我想知道這是否是在用SVG圖標替換圖標字體的普遍推動中的疏忽，還是我理解應該如何使用圖標的缺陷？ –

沒有什麼能阻止你像使用位圖spritesheet一樣使用SVG文件。 IE瀏覽器。 'background-image'和'background-position'。這個頁面也可能有一些幫助：https：//betravis.github.io/icon-methods/svg-sprite-sheets.html –

這是真的Paul，但你失去了用這種方法填充圖標的能力。 –

使用CSS插入和從spritesheet

回答

相關問題