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

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

1 个答案: