css - Angular 8无法更改内联SVG的填充颜色

Question

我在填充 InlineSVG 时遇到了一些问题。我有一个divsvg：

<div class="svg-div" [inlineSVG]="'../../../assets/images/add.svg'"></div>

然后在 CSS 中：

.svg-div {
    fill: blue;
}

但图标仍然是灰色的。

我也试过：

.svg-div ::ng-deep svg{
    fill: blue;
}

在不同的组合中，但没有任何效果。
这是我的 stackblitz 的链接。怎么了？

Answer 1

它不起作用，因为填充属性在您的 svg 文件中是硬编码的。从您的 svg 文件中删除fill="#7A7A7A"然后您将能够通过 css 更改颜色。

Answer 2

你需要添加css的路径

::ng-deep svg path {
  fill: blue;
}