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

Posted 2023-03-13

【中文标题】通过打字稿更改按钮单击时的svg颜色

【英文标题】：Change svg color on button click via typescript

【发布时间】：2019-11-19 17:16:11

【问题描述】：

我想在单击按钮时更改 SVG 的填充颜色。我可以通过外部 CSS 更改它（使用 npm 包 angular-svg-icon），但我不知道如何通过打字稿来做到这一点。我在***中遇到过类似的问题，但没有人给用户答案：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()

【问题讨论】：

为什么不使用style="fill:red;" 并将red 更改为您想要的颜色？

【参考方案1】：

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

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

在css中

.someclassname
      //your css to fill the color

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

StackBlitz

【讨论】：

这在 html 页面内创建 svg 时有效，但是当我在 <svg-icon> 中通过 src="assets/images/circle.svg" 引用它时，颜色更改不再有效。

这种方式不能修改svg