如何在 Angular JS 中更改 SVG 的颜色答案

【问题标题】：How to change color of an SVG in Angular JS如何在 Angular JS 中更改 SVG 的颜色
【发布时间】：2019-04-23 19:13:39
【问题描述】：

我在我的代码中使用了 src，当我想激活时，我想更改我使用的 svg 的颜色。 HTML：

<img src="../icons/Burgers.svg" class="icon" />

所以我在 icon-menu-bar css 中使用了：

.icon{
fill:red;
}

但 SVG 没有改变。所以主要问题是在我的 html 中更改 svg 颜色，而 SVG 位于不同的文件中。

【问题讨论】：

【解决方案1】：

您可以使用 ng-include 将 svg 元素导入代码，然后从导入的 svg 中选择您的特定元素并更改 css 。例如：

<div class="icon svg" ng-include=" '/assets/img/icon.svg' " > </div>

.icon.svg svg {
  fill:red;
}

希望这对您有帮助。

【讨论】：

【解决方案2】：

如果你想改变图标 SVG 的颜色，你应该将 SVG 图像转换为字体（https://icomoon.io/app/#/select），然后将它包含到自己的项目中并改变颜色。

P.S：很多非 UI 库都有自己的图标集，例如：

【讨论】：