css - 如何更改 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

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

例子:

组件.ts

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

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

组件.css:

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