typescript svg circle - 无法绑定到 cx，因为它不是已知的本机属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38306363/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
svg circle - Can't bind to cx since it isn't a known native property
提问by Sharmile Murugaraj
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:
我需要根据计算的百分比做一个进度弧，我创建了一个自定义指令来访问用户的 svg 属性，同时在我的模板中更新它，我收到以下错误：
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
无法绑定到“cx”，因为它不是已知的本机属性
无法绑定到“cy”，因为它不是已知的本机属性
etc..
等等..
I am getting these sorts of errors for all the svg attributes.
我收到所有 svg 属性的此类错误。
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="{{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;
}
}
Can someone tell me where I am going wrong?
有人能告诉我我哪里出错了吗？
回答by Poul Kruijt
In order to bind to SVG element attributes in Angular, you must prefix them with attr:
为了绑定到 Angular 中的 SVG 元素属性，您必须在它们前面加上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.
我不完全确定它是否应该是[attr.stroke-width]或[attr.strokeWidth]，但试一试。
You need to use the attrprefix when the attribute has no property associated
attr当属性没有关联的属性时，您需要使用前缀
