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

Posted 2023-03-06

【中文标题】如何在 Angular JS 中更改 SVG 的颜色

【英文标题】：How to change color of an SVG in Angular JS

【发布时间】：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 位于不同的文件中。

【问题讨论】：

Change svg color的可能重复

【参考方案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 库都有自己的图标集，例如：

(https://getbootstrap.com/docs/3.3/components/) (https://fontawesome.com/icons?d=gallery)

【讨论】：

我有一个平面设计师来制作我的 SVG