svg circle for angular2

Question

Ho bisogno di fare un arco di progresso in base alla percentuale calcolata, ho creato una direttiva personalizzata per accedere agli attributi svg dall'utente, mentre aggiornando quello nel mio modello, sto ottenendo il seguente errore:

"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 " ecc ..

sto ottenendo l'errore precedente per tutti gli attributi SVG.

Qui di seguito è il mio codice in giada:

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

Di seguito è riportato il mio codice di direttiva:

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() { 
    console.log('ffffffffffff',parseFloat(this.strokeWidth)); 
    alert('gggggggggg'); 
    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; 
    console.log('ggggggggggggggggg',this.strokeWidthCapped,this.radius,this.circumference); 
    } 
} 

Qualcuno può dirmi dove sto andando male?

Answer 1

Al fine di legarsi a elemento SVG attributi in angolare 2, è necessario anteporre con attr:

Per la vostra cerchia questo sarà:

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

Non sono del tutto sicuro se dovrebbe essere [attr.stroke-width] o [attr.strokeWidth], ma dargli uno scatto