Angular 8 不能改變內聯 SVG 的填充顏色

Question

我在填充 InlineSVG 時遇到了一些問題。 我有一個帶有 svg 的div ：

<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;
}