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