圖像/ SVG更改顏色？

Question

---

因此，我一直在開發某些東西，並決定使用SVG。 但是，我的應用程序有多個主題，是否可以通過CSS將SVG的顏色（例如白色）更改為黑色？ 我不在考慮過濾，因為無法應用，因此整個圖像就像純紅色。 例如，我有一個帶有白色圖標的圖像，是否為svg。 但我要改用紅色圖標。 反正有這樣做嗎？ 我寧願不使用內嵌svg，因為它會使自定義復雜化。 如果您需要任何澄清，請通知我。 提前致謝

編輯：一些額外的代碼：

<img class="fullscreen" src="assets/icons/ic_fullscreen.svg" />

編輯： JSFiddle： http : //jsfiddle.net/MashedPotatoes/s2gs3t16/1/

Answer 1

幾個月前，我實際上遇到了同樣的問題。 最終，我寫了一些東西，為我們提供了我們都在尋找的東西-使用相同的SVG，並使用CSS更改其顏色。 這個想法是，您可以通過<object>創建它，然后對其內容進行一些DOM操作，以將其替換為<div> ，從而提供對內容的訪問。

我在這里寫了一篇有關該過程的小文章-您可以看到解決方案並滿足您的需求。 另外-該代碼是AngularJS中的指令，因此它可能不適合您，但是想法是相同的，您可以將其使用並在Javascript / Jquery中使用它。

如果您使用的是Angular：

您可以使用ngReusableSvg這個組件。

Answer 2

您無法動態更改背景SVG的顏色。 但是在大多數情況下，您可以使用SVG作為“遮罩”來更改容器的背景顏色。

clip-path: url(#clipping) http://codepen.io/yoksel/full/fsdbu/