svg circle for angular2

I need to do a progress arc based on the calculated percentage, I have created a custom directive to access the svg attributes from the user, while updating that in my template, I am getting the following error:

"Can't bind to 'cx' since it isn't a known native property ", "Can't bind to 'cy' since it isn't a known native property " etc..

I am getting the above error for all the svg attributes.

Below is my code in jade:

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

Below is my directive code:

import {Component,Input,AfterViewInit} from '@angular/core';

@Component({
  selector:'progress-arc',
  template:`
   <svg height="100" width="100">
      <circle fill="white"
          cx=""
          cy=""
          r=""
          stroke=""
          stroke-width=""
          stroke-dasharray=""
          stroke-dashoffset=""/>
  </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 someone tell me where I am going wrong?

from svg circle for angular2