svg circle - 알려진 네이티브 속성이 아니므로 cx에 바인딩할 수 없습니다.

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

제가 어디가 잘못되고 있는지 누가 말해줄 수 있습니까?

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속성에 연관된 속성이 없을 때 접두사

아직도 Angular를 사용하는 사람이 있다면 제가 참여할 거라 생각했습니다.JS. 속성에 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}}"/>

이 경우에는 곱슬곱슬한 교정기를 유지합니다.

언급URL : https://stackoverflow.com/questions/38306363/svg-circle-cant-bind-to-cx-since-it-isnt-a-known-native-property