web-dev-qa-db-ja.com

svg circle-cxは既知のネイティブプロパティではないため、cxにバインドできません

計算された割合に基づいて進捗状況を確認する必要があります。ユーザーからsvg属性にアクセスするためのカスタムディレクティブを作成しましたが、テンプレートでそれを更新すると、次のエラーが表示されます。

既知のネイティブプロパティではないため、「cx」にバインドできません
既知のネイティブプロパティではないため、「cy」にバインドできません

等..

すべてのsvg属性について、この種のエラーが発生しています。

以下はjaの私のコードです：

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

誰かが私が間違っている場所を教えてもらえますか？

javascriptangulartypescriptangular2-directives
34
Sharmile Murugaraj

angular 2の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]、しかしそれを試してみる

89
PierreDuc