angular - svg circle for angular2 -

i need progress arc based on calculated percentage, have created custom directive access svg attributes user, while updating in template, getting following error:

"can't bind 'cx' since isn't known native property ", "can't bind 'cy' since isn't known native property " etc..

i getting above error svg attributes.

below code in jade:

progress-arc([size]="200", [strokewidth]="20", [stroke]="red", [complete]="0.8") 

below directive code:

import {component,input,afterviewinit} '@angular/core';  @component({   selector:'progress-arc',   template:`    <svg height="100" width="100">       <circle fill="white"           cx="{{parsedsize/2}}"           cy="{{parsedsize/2}}"           r="{{radius}}"           stroke="{{stroke}}"           stroke-width="{{strokewidthcapped}}"           stroke-dasharray="{{circumference}}"           stroke-dashoffset="{{(1 - parsedcomplete) * circumference}}"/>   </svg>`,   providers: [],   directives: [] }) export class progressarc implements afterviewinit {  @input('size') size:string;  @input('strokewidth') strokewidth:string;  @input('stroke') stroke:string;   @input('complete') complete:string;   parsedstrokewidth:number;   parsedsize:number;   parsedcomplete:number;   strokewidthcapped:number;   radius:number;   circumference:number;    ngafterviewinit() {   console.log('ffffffffffff',parsefloat(this.strokewidth));     alert('gggggggggg');     this.parsedsize = parsefloat(this.size);     this.parsedstrokewidth = parsefloat(this.strokewidth);     this.parsedcomplete = parsefloat(this.complete);     this.strokewidthcapped = math.min(this.parsedstrokewidth, this.parsedsize / 2 - 1);     this.radius = math.max((this.parsedsize - this.strokewidthcapped) / 2 - 1, 0);     this.circumference = 2 * math.pi * this.radius;     console.log('ggggggggggggggggg',this.strokewidthcapped,this.radius,this.circumference);   } } 

can tell me going wrong?

in order bind svg element attributes in angular 2, must prefix them attr:

for circle be:

<svg height="100" width="100">       <circle fill="white"           [attr.cx]="parsedsize/2"           [attr.cy]="parsedsize/2"           [attr.r]="radius"           [attr.stroke]="stroke"           [attr.stroke-width]="strokewidthcapped"           [attr.stroke-dasharray]="circumference"           [attr.stroke-dashoffset]="(1 - parsedcomplete) * circumference"/> </svg> 

i not entirely sure if should [attr.stroke-width] or [attr.strokewidth], give shot