颜色可变的SVG？

Question

我希望建立一个网站，只需更改 css 即可轻松更改图标颜色。我得到了一组 svg 文件形式的自定义图标。

我已经尝试过背景颜色、滤镜等（参见 https://codesandbox.io/s/exciting-montalcini-xfufu?file=/index.html）。

哪种技术最好用？我应该从 SVG 生成字体吗？

Answer 1

生成自定义图标字体属性是最好的主意，因为您在 HTML 标记中的实现速度最快，而且不必再担心一次又一次地嵌入图像。

https://icomoon.io 当您正在寻找一个帮助软件来生成您的字体时，它是一个很棒的生成器。

Answer 2

首先，打开您的 SVG 文件并更改 .cls-1 路径的样式：

.cls-1 { fill: currentColor; }

现在将 SVG 放入您的 HTML 代码中。盾牌的颜色将遵循当前的字体颜色。 <use> 标签可让您轻松复制它。只需确保使用 style="display: none;".

隐藏 SVG 的原始实例

svg {
  width: 42px;
  height: 50px;
}

.green-icon { color: green; }
.red-icon { color: red; }
.blue-icon { color: blue; }

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 768.42 907.1" style="display: none;"><defs><style>.cls-1{fill:currentColor;}.cls-2{fill:#fff;}</style></defs><g id="Livello_2" data-name="Livello 2"><g id="Layer_1" data-name="Layer 1"><path class="cls-1" d="M766.27,141.2c-157.6,0-279.1-44.3-382.5-141.2C282,97.7,160.47,141.2,2.07,141.2c0,253.7-53.4,618.2,382.5,765.9C820.47,758.6,766.27,394.9,766.27,141.2Z"/><path class="cls-2" d="M449.87,436.6a43.42,43.42,0,0,1,28.9-7.1l113.9-114-63.8-63.8L415,365.7a42.67,42.67,0,0,1-7.4,29.2Z"/><polygon class="cls-2" points="251.17 575.4 246.97 571.3 225.37 588.8 188.97 646.1 198.37 655.4 255.67 619 273.17 597.5 268.97 593.3 341.47 520.8 323.47 503.1 251.17 575.4"/><path class="cls-2" d="M350.27,374.5a88.86,88.86,0,0,0-108.9-109.8l50.4,50.3-13.2,49.3-49.4,13.2-50.3-50.3a88.86,88.86,0,0,0,113.5,107.7l.3.3,207.1,207.1a42,42,0,0,0,59.4-59.4Zm182.8,261a16,16,0,1,1,16.1-16A16,16,0,0,1,533.07,635.5Z"/></g></g></svg>

<svg class="green-icon" viewBox="0 0 768.42 907.1"><use href="#Layer_1"></use></svg>
<svg class="red-icon" viewBox="0 0 768.42 907.1"><use href="#Layer_1"></use></svg>
<svg class="blue-icon" viewBox="0 0 768.42 907.1"><use href="#Layer_1"></use></svg>

（此解决方案基于 CSS 技巧中的 this article。）

颜色可变的SVG？

Color changeable SVG?

css

svg

svg-filters