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"/>
>Solution :
You can use any of these options:
#rrr (mouseenter)="rrr.setAttribute('fill', 'red')"
#rrr (mouseenter)="rrr.style.fill = 'red'"