svg circle - Can't bind to cx since it isn't a known native property

In order to bind to SVG element attributes in Angular, you must prefix them with attr:

For your circle this will 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 am not entirely sure if it should be [attr.stroke-width] or [attr.strokeWidth], but give it a shot.

You need to use the attr prefix when the attribute has no property associated

Just thought I'd chime in if anyone is still using AngularJS. Use the ng-attr- prefix for attributes to interpolate:

 <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}}"/>

Becomes:

 <svg height="100" width="100">  <circle fill="white"      ng-attr-cx="{{parsedSize/2}}"      ng-attr-cy="{{parsedSize/2}}"      ng-attr-r="{{radius}}"      ng-attr-stroke="{{stroke}}"      ng-attr-stroke-width="{{strokeWidthCapped}}"      ng-attr-stroke-dasharray="{{circumference}}"      ng-attr-stroke-dashoffset="{{(1 - parsedComplete) * circumference}}"/>

Note that you keep the curly braces in this case.