Question

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

This question没有帮助，因为它使用了Modernizr库，我想避免使用它。我也不想直接在Angular项目的html文件中复制图像的d标签中的path字段，因为这将是我不喜欢的文字墙愿意接受。我可以接受使用外部专用库来实现正确的结果，例如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;将一个类应用于object标签，则不会有任何改变。有什么想法可以实现我想要的吗？

Answer 1

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

Answer 2

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

角度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
  }

Answer 3

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

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

Answer 4

fill: green;

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

fill:color;

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

Answer 5

我最近也遇到了同样的问题，并通过生成一个新的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 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 安装到您的项目中，并自动将 svgs 生成到 ts 文件中，其中 svgs 将转换为包含的对象

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，所以我们可以使用color 上的svg-icon 属性来控制颜色

我们还可以向 svg-icon 标签添加一个类并使用 ng-class

控制样式

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

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

6 个答案: