svg circle - 无法绑定到 cx，因为它不是已知的原生属性答案

【问题标题】：svg circle - Can't bind to cx since it isn't a known native propertysvg circle - 无法绑定到 cx，因为它不是已知的原生属性
【发布时间】：2016-11-13 08:47:39
【问题描述】：

我需要根据计算的百分比做一个进度弧，我创建了一个自定义指令来访问用户的 svg 属性，在我的模板中更新它时，我收到以下错误：

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

等等。

我收到所有 svg 属性的此类错误。

下面是我的jade代码：

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;
  }
}

谁能告诉我哪里出错了？

【问题讨论】：

标签： javascript angular typescript angular2-directives

【解决方案1】：

为了在 Angular 中绑定到 SVG 元素属性，你必须在它们前面加上 attr:

对于你的圈子，这将是：

<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>

我不完全确定应该是[attr.stroke-width] 还是[attr.strokeWidth]，但试一试。

当属性没有关联属性时，您需要使用attr 前缀

【讨论】：

正确答案。 [attr.cx] 前缀对我有用。
它正在工作，但为什么有时我们需要 attr。有些人不，那是没有意义的（编辑：我现在正在发布一个问题）
搜索html属性和属性的区别。如果要绑定到属性，则需要前缀
@GreenEyedAndy 当然，你可以这样做：[attr.stroke-dasharray]="circum1 + ', ' + circum2"。或者你可以这样做。 [attr.stroke-dasharray]="{{circum1}}, {{circum2}}"。任何你认为更清晰的东西。
@NajamUsSaqib 作为答案说：[attr.fill]="myColorVariable"

【解决方案2】：

只是想如果有人还在使用 AngularJS，我会插话。使用 ng-attr- 前缀插入属性：

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

请注意，在这种情况下，请保留大括号。

【讨论】：