Изменить цвет SVG по нажатию кнопки через машинопись

Question

Я хочу изменить цвет заливки моего SVG, когда я нажимаю кнопку.Я могу изменить его с помощью внешнего CSS (используя пакет npm angular-svg-icon), но я не знаю, как это сделать с помощью машинописи.Я сталкивался с подобным вопросом здесь в stackoverflow, но никто не дал ответ пользователю: svg изменить прямоугольник Цвет на кнопке 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 и применить CSS для заполнения что-то вроде

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

в CSS

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

затем в методе changecolor установите yourconditionvariable в true

StackBlitz