Angular：按事件划分的 SVG 属性答案

【问题标题】：Angular: SVG attribute by eventAngular：按事件划分的 SVG 属性
【发布时间】：2021-12-26 12:06:09
【问题描述】：

如何通过 Angular 事件（例如 mouseenter）访问 SVG 对象的属性（例如填充）？

我尝试了这些变体但没有成功。

<rect #rrr [attr.fill]="'green'" (mouseenter)="rrr.fill='red'/>

<rect #rrr [attr.fill]="'green'" (mouseenter)="rrr.attr.fill='red'/>

<rect #rrr [attr.fill]="'green'" (mouseenter)="rrr.attributes.fill='red'/>

我想直接做 - 所以我使用#rrr。通过组件变量调度它运行良好 - 但不是我想要的。

<rect [attr.fill]="myvar == true ? 'red' : 'green'" (mouseenter)="myvar = true"/>

【问题讨论】：

标签： angular svg

【解决方案1】：

您可以使用以下任何选项：

#rrr (mouseenter)="rrr.setAttribute('fill', 'red')"

#rrr (mouseenter)="rrr.style.fill = 'red'"

【讨论】：

【解决方案2】：

尝试使用类来实现：

<rect [ngClass] = "{'red': myvar==true, 'green': myvar!=true}"/>

在你的 CSS 上：

.gren {
    fill:green;
}
.red{
   fill: red;
}

【讨论】：

OP 表示他们不想使用像 myvar 这样的组件变量。
用这个方法可以让你的html模板更干净。
1.是的，事实上它可能是，但 OPs 要求与答案不一致。 2.使用三元运算符可以更干净：[ngClass]="myvar ? 'red' : 'green'"。
对我来说看起来更干净:)。