Angular: SVG attribute by event-CodePudding

How can I access the atrribute (e.g. fill) of an SVG object via an Angular event (e.g. mouseenter)?

I tried these variants without success.

<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'/>

I want to do it directly - so I use the #rrr. Dispatching it over a component-variable is working well - but not what I want.

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

CodePudding user response：

You can use any of these options:

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

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

CodePudding user response：

Try to use class to achieve that:

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

On your css:

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