svg circle dla angular2

Question

Potrzebuję wykonać łuk postępu na podstawie obliczonego procentu, stworzyłem niestandardową dyrektywę, aby uzyskać dostęp do atrybutów svg od użytkownika, aktualizując to w moim szablonie, otrzymuję następujący błąd:

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

otrzymuję powyższy błąd dla wszystkich atrybutów sVG.

Poniżej jest mój kod w jade:

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

Poniżej jest mój kod dyrektywa:

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

Czy ktoś może mi powiedzieć, gdzie mam zamiar tak?

Answer 1

W celu związania do elementu SVG atrybuty kątowej 2, należy poprzedzić je attr:

Dla kręgu będzie:

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

nie jestem do końca pewien, czy powinien on być [attr.stroke-width] lub [attr.strokeWidth], ale zrób ujęcie