Angular2 *ngFor with SVG circle

Question

I am trying to create a legend/key for a pie chart with a small circle with the same color in the graph and text next to it. However, this is the error that I am getting when I try to do this:

"Template parse errors: Can't bind to 'fill' since it isn't a known native property"

Below is my code:

<svg *ngFor="let item of items;" width="250" height="75">
    <circle cx="50" cy="50" r="20" fill={{item.color}} />
    <text x="100" y="50">{{item.name}}</text>
</svg>

item.color and item.name are both strings, and when I try to just display them both as text, all the values do appear.

Does anyone know how I can fix this error?

Answer 1

Try the following,

<svg *ngFor="let item of items;" width="250" height="75">
    <circle cx="50" cy="50" r="20" [attr.fill]="item.color" />
    <text x="100" y="50">{{item.name}}</text>
</svg>