如何在 Angular 中更改 svg 元素的颜色？

Question

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

This question 没有帮助，因为它使用了 Modernizr 库，我想避免它。我也不想在 Angular 项目的 html 文件中直接复制图像的 path 标记中的 d 字段，因为这将是一堵我不愿意接受的文本墙。我可以接受使用外部专用库来获得正确的结果，例如ng-inline-svg，我尝试使用以下方式：

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

违反以下 CSS 类：

.svg1 {
  color: green;
}

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

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

<div class="col-2">
    <object
       id="svg1"
       data="./assets/images/icons/ApplyIcon.svg"
       type="image/svg+xml">
    </object>
</div>

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

Answer 1

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

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

Answer 2

fill: green;

仅适用于通常存在于 svg 元素中的路径元素。 color 属性用于字体颜色，它不适用于 svg 元素。 在你的场景中，你可以在下面的东西 1）在您的文件夹中 /assets/images/icons/ApplyIcon.svg 编辑 svg 图标和该路径 给属性填充=“绿色” 2）如果你想在多个不同颜色的地方使用那个图标，那么上面的方法 将不起作用，因为相同的颜色将被应用到任何地方。在这种情况下，您可以简单地从 svg 中的所有路径中删除 fill="color"。 然后你就可以应用css了

fill:color;

在这种情况下，虽然 fill:color 没有应用于 SVG，但它会遍历子元素路径，因此它会起作用。

Answer 3

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

示例：

组件.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
}

Answer 4

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

Answer 5

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

角度 HTML：

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

角度 CSS

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

Answer 6

公认的答案很好，但如果 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 文件中，其中 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）

因为填充或描边属性设置为currentColor，我们可以使用svg-icon上的color属性来控制颜色

我们还可以在svg-icon 标签中添加一个类并使用ng-class 控制样式

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

Answer 7

在我的情况下，我需要更改几个路径的颜色并在整个 SVG 元素内圈起来。

这解决了我的问题：<svg>... <path [attr.fill] = "<color>" ... /> ...</svg>。