svg circle for angular2

Question

계산 된 백분율을 기반으로 진행 호를 수행해야합니다. 내 템플릿에서 해당 속성을 업데이트하는 동안 사용자의 svg 특성에 액세스 할 사용자 지정 지시문을 만들었습니다.

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

나는 모든 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() { 
    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); 
    } 
} 

내가 잘못 가고 어디에 누군가가 말해 줄래? SVG 요소에 결합하기 위해

Answer 1

가 각 2 속성, 당신은 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]이지만 사진을 찍으십시오.