使用component.html文件中的svg元素，并使用[ngClass]指令根据条件动态更改内部svg类。
举例说明：
component.ts

data.state = "New" || "In-Progress" || "Completed" // this changes dynamically based on the data

字符串
component.html:

<svg <circle class="cls-3" [ngClass] = "{'New': 'blue', 'In-Progress':'orange','Completed':'green'}[data.state]" cx="8.21" cy="8.01" r="2.44" transform="translate(-3.22 8.89) rotate(-48.73)"/></svg> // inner class of svg element

型
component.css:

.blue {
    fill:blue
}
.orange{
   fill: orange
}
.green {
   fill: green
}

型

我尝试了不同的方法来改变img src SVG的颜色，最终实现了使用SVG作为一个面具，它的工作预期为我。
Angular HTML：

<div class="icon" [ngStyle]="{'mask': 'url(' + icon + ') no-repeat center', '-webkit-mask': 'url(' + icon + ') no-repeat center'}"></div>

字符串
Angular CSS

.icon {
    background-color: #0000; // Here you can the svg color
  }

型

在我的例子中，我需要使用Angular动态更改SVG元素中特定路径和圆圈的颜色。下面是我如何实现的：
1.在你的Angular组件中Declare一个颜色变量：

export class YourComponent {
        color: string = 'yourDefaultColor';
    }

字符串
1.在HTML模板中，使用属性绑定动态设置SVG元素的fill属性：

<svg>
      <path [attr.fill]="color" ... />
      <!-- Other SVG elements -->
</svg>

型
确保将'yourDefaultColor'替换为所需的默认颜色。

使用setAttribute()属性更改SVG的颜色，

document.getElementById("svg1").setAttribute("fill", "green");

字符串

fill: green;

字符串
仅适用于路径元素，通常存在于svg元素中。color属性是字体颜色，它不会对svg元素起作用。在您的场景中，您可以在下面的事情1）在您的文件夹/assets/images/icons/ApplyIcon. svg编辑svg图标，并为该路径给予属性fill=“绿色”2）如果你想在多个地方使用不同颜色的图标，那么上面的方法将不起作用，因为相同的颜色将应用于所有地方。在这种情况下，你可以简单地删除fill=“color”从svg中的所有路径。在此之后，您可以应用css

fill:color;

型
在这种情况下，虽然fill：color没有应用在SVG上，但它会遍历到子元素路径，因此它会工作。

我最近遇到了同样的问题，并通过生成一个新的Angular组件并使用我的.svg文件代替组件的.html文件来解决它。
例如，更新模板路径以指向您的.svg，像这样：templateUrl: './my-icon.component.svg'。然后您可以在SVG文件中添加Angular指令。
看看这个例子：https://levelup.gitconnected.com/using-svg-files-as-component-templates-with-angular-cli-ea58fe79b6c1

公认的答案是好的，但如果你有一个臃肿的SVG呢？
我们首先需要使用@ngneat/svg-icon转换项目中的SVG或所有SVG
if the fill or stroke properties of elements in the SVG are set to currentColor, they will have the color defined for the containing DOM element,. So the color can easily be changed by changing the color style on the svg-icon element.
移动你的SVG图标到src/assets/svg目录运行ng add @ngneat/svg-icon
此命令将svg-icon安装到您的项目中，并自动将svg生成到ts文件中，在ts文件中，svg被转换为包含以下内容的对象

• name键：这是为svg生成的名称，将用于标识svg
• data键：这本质上是从svg文件复制的svg代码

生成的svg可以在app/svg目录中找到
查看app.module.ts文件，SvgIconsModule被导入，并在@Ngmodule导入中声明。
从app/svg目录导入所有你想在项目中使用的svg，并把它放在SvgIconsModule显示的图标数组中。

import { SvgIconsModule } from '@ngneat/svg-icon';
import { appMasterCardLogoIcon, appPaypalLogoIcon, appVisaLogoIcon } from './svg';

@NgModule({
  ...,
  imports: [
    BrowserModule,
    SvgIconsModule.forRoot({
      icons: [appApplePayLogoIcon,
        appMasterCardLogoIcon,
        appPaypalLogoIcon,
        appVisaLogoIcon],
    })
  ],
 ...
})

字符串
你现在可以在你的组件中的任何地方使用svg-icon标签，那么属性key将是生成的name键（用于标识svg）
因为fill或stroke属性被设置为currentColor，所以我们可以使用svg-icon上的color属性来控制颜色
我们还可以向svg-icon标记添加一个类，并使用ng-class控制样式

<svg-icon key={{payment.logoKey}} [ngClass]="{'selected-payment': payment.isSelected}"class="payment-logo"></svg-icon>

型