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

Posted 2023-02-23

【中文标题】如何在 Angular 中更改 svg 元素的颜色？

【英文标题】：How to change the color of an svg element in Angular?

【发布时间】：2020-04-05 15:59:39

【问题描述】：

我需要通过向 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; 将类应用于对象标记，则不会有任何改变。有什么想法可以实现我想要的吗？

【参考方案1】：

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

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

【讨论】：

直接将style="fill: green;" 应用于object 标签不起作用，正如我在我的问题中解释的那样，那么为什么要这样做呢？此外，在 Angular 项目中，我们应该避免像您在这里所做的那样直接访问 DOM，因为这是 Angular 的控制范围。

【参考方案2】：

fill: green;

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

fill:color;

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

【讨论】：

我注意到 fill: green 已正确应用于 path 元素，但不幸的是，您的解决方案 (1) 对我不起作用，因为我需要根据状态更改该图像颜色我真的会避免解决方案（2），因为我认为它是不必要的过载。难道真的没有其他方法可以将fill 属性应用于Angular 中的SVG 图像吗？或者更确切地说，将 SVG 图像加载为图标并通过应用 CSS 类来更改其颜色？

只需添加内联 svg 图标，而不是提供 scg 图标的路径。现在在 svg 的路径中，您可以根据您的状态动态更改填充属性。

能否详细说明和/或提供一个示例？

在回答中添加了这个

有问题你提到你不想在模板中放置冗长的 svg 元素，所以我认为我的方法行不通。我认为没有它，您将无法访问 path 元素，因为它会创建另一个嵌入式文档元素。

【参考方案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

【参考方案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

【参考方案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
  

【参考方案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>

【参考方案7】：

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

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