svg circle - Can't bind to cx since it isn't a known native property
<p>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:</p>

<blockquote>
  <p>Can't bind to 'cx' since it isn't a known native property<br>
  Can't bind to 'cy' since it isn't a known native property      </p>
</blockquote>

<p>etc.. </p>

<p>I am getting these sorts of errors for all the svg attributes. </p>

<p>Below is my code in jade:</p>

<pre><code>progress-arc([size]="200", [strokeWidth]="20", [stroke]="red", [complete]="0.8")
</code></pre>

<p>Below is my directive code:</p>

<pre><code>import {Component,Input,AfterViewInit} from '@angular/core';

@Component({
  selector:'progress-arc',
  template:`
   &lt;svg height="100" width="100"&gt;
      &lt;circle fill="white"
          cx="{{parsedSize/2}}"
          cy="{{parsedSize/2}}"
          r="{{radius}}"
          stroke="{{stroke}}"
          stroke-width="{{strokeWidthCapped}}"
          stroke-dasharray="{{circumference}}"
          stroke-dashoffset="{{(1 - parsedComplete) * circumference}}"/&gt;
  &lt;/svg&gt;`,
  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() {
    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;
  }
}
</code></pre>

<p>Can someone tell me where I am going wrong?</p>