javascript - svg circle - Ne mogu vezati za cx jer nije poznato izvorno svojstvo

Trebam napraviti progresni luk na temelju izračunatog postotka. Napravio sam prilagođenu direktivu za pristup atributima SVG-a od korisnika, dok ažuriram to u svom predlošku, dobivam sljedeću pogrešku:

Nije moguće vezati za 'cx' jer nije poznato izvorno svojstvo
Nije moguće vezati za 'cy' jer nije poznato izvorno svojstvo

itd..

Dobivam ovu vrstu pogrešaka za sve SVG atribute.

Ispod je moj kod u Jadeu:

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

Ispod je moj direktivni kod:

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

Može li mi netko reći gdje griješim?

Odgovor #1

Kako biste se vezali za atribute SVG elemenata u Angularu, morate im dodati prefiks attr:

Za vaš krug ovo će biti:

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

Nisam potpuno siguran treba li biti [attr.stroke-width] ili [attr.strokeWidth], ali pokušaj.

Treba koristiti prefiks attr kada atribut nema pridruženu svojinu

Povezani članci