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

Question

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

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

所以我在图标菜单栏css中使用了

.icon{
fill:red;
}

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

Answer 1

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

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

• （https://getbootstrap.com/docs/3.3/components/）
• （https://fontawesome.com/icons?d=gallery）

Answer 2

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

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

.icon.svg svg {
  fill:red;
}

希望这可以帮助您节省时间。