Svg Circle-不能绑定到 cx，因为它不是已知的本机属性

我需要做一个基于计算百分比的进度弧，我已经创建了一个自定义指令来访问来自用户的 svg 属性，同时更新我的模板，我得到以下错误:

不能绑定到“ cx”，因为它不是已知的本机属性
不能绑定到“ cy”，因为它不是已知的本机属性

等等。

我得到了所有 svg 属性的这类错误。

下面是我的翡翠密码:

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

下面是我的指令代码:

import {Component,Input,AfterViewInit} from '@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() {
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;
}
}

有人能告诉我哪里出了问题吗？