通过打字稿更改按钮单击时的svg颜色

Question

我想在单击按钮时更改 SVG 的填充颜色。我可以通过外部 CSS 更改它（使用 npm 包 angular-svg-icon），但我不知道如何通过打字稿来做到这一点。我在stackoverflow中遇到过类似的问题，但没有人给用户答案：svg change rectangle Color on button ng-click

circle.svg：

<svg id="bars" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 63.15 224.35">
    <circle class="cls-1" cx="50" cy="50" r="50" fill="#529fca" />
</svg>

tab1.page.html：

<ion-content>
    <svg-icon [applyCss]="true" src="assets/images/circle.svg" [svgStyle]="{ 'height.px':200, 'width.px':200 }" />
    <ion-button (click)="ChangeColor()">Click</ion-button>
</ion-content>

tab1.page.scss：

#bars{
    position: absolute;
    top: 80px;
    right: 80px;
    width: 200px;
    height: 100px;
}

.cls-1 {
    fill:blue;
}

我打算操作 SVG 颜色的函数：ChangeColor(){ }

Answer 1

您可以在您的 svg 上添加条件 class 并应用 css 填充类似的东西

<circle  [ngClass]="{'someclassname': yourconditionvariable}"></circle>

在css中

.someclassname{
      //your css to fill the color
}

然后在changecolor方法中设置yourconditionvariable为true

StackBlitz