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

Question

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

.svg1 {
  color: green;
}

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

<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类。

示例：

component.ts

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

<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

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