关于CSS：如何在Angular中更改SVG元素的颜色？

How to change the color of an svg element in Angular?

我需要通过将不同的CSS类应用于Angular项目来加载，显示和动态更改SVG图像的颜色。

该问题无济于事，因为它利用了Modernizr库，我想避免使用它。我也不想直接在Angular项目的html文件中复制图像的path标记中的d字段，因为这将是我不愿接受的一堵墙。我可以接受使用外部专用库来实现正确的结果，例如ng-inline-svg，我尝试使用以下方式：

1 2	<div class="svg1" aria-label="My icon" [inlineSVG]="'./assets/images/icons/ApplyIcon.svg'">

对抗以下CSS类：

1
2
3

.svg1 {
color: green;
}

它完美地将图像作为常规的img标签加载，但是如果我尝试将自定义类应用于它以更改图像颜色，则它将不起作用。

此外，我尝试通过以下方式使用对象标签：

1
2
3
4
5

但是，再次，如果我使用CSS指令color: green;或fill: green;将一个类应用于对象标签，则不会有任何改变。有什么想法可以实现我想要的吗？

我尝试了不同的方法来更改img src SVG颜色，最终使用SVG作为蒙版实现了它，并且按我的预期工作。

angularHTML：

angularCSS

1
2
3

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

在component.html文件中使用svg元素，并使用[ngClass]指令根据条件动态更改内部svg类。

示例：

component.ts

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

component.html：

1	<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：

1
2
3
4
5
6
7
8
9

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

可接受的答案很好，但是如果您的SVG膨胀了怎么办？

我们首先需要使用@ ngneat / svg-icon

转换项目中的SVG或所有SVG

如果SVG中元素的填充或笔触属性设置为currentColor，则它们将具有为包含的DOM元素定义的颜色。因此，可以通过更改svg-icon元素上的颜色样式轻松更改颜色。

将您的SVG图标移动到src / assets / svg目录中，然后运行ng add @ngneat/svg-icon

此命令将svg-icon安装到您的项目中，并自动将svgs生成到ts文件中，其中svgs变成包含

的对象

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

生成的svg可以在app / svg目录中找到

看着app.module.ts文件，导入了SvgIconsModule，并在@Ngmodule导入中声明了它。

从app / svg目录导入要在项目中使用的所有svg，并将其放在SvgIconsModule公开的图标数组中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

控制样式

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

我最近也遇到了同样的问题，并通过生成一个新的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

1	fill: green;

仅适用于svg元素中通常存在的path元素。
color属性用于字体颜色，不适用于svg元素。
在您的情况下，您可以在事物下方
1)在您的文件夹/assets/images/icons/ApplyIcon.svg中，编辑svg图标，然后输入该路径
给属性fill = " green "
2)如果您想在具有不同颜色的多个位置上使用该图标，则可以使用上述方法
将无法使用，因为相同的颜色将被应用到所有地方。在这种情况下，您可以简单地从svg内的所有路径中删除fill = " color "。
然后，您可以应用css

1	fill:color;

在这种情况下，尽管在SVG上未应用fill：color，但它将遍历到子元素路径，因此它将起作用。