web-dev-qa-db-fra.com

cercle svg - Impossible de se lier à cx car ce n'est pas une propriété native connue

J'ai besoin de faire un arc de progression basé sur le pourcentage calculé, j'ai créé une directive personnalisée pour accéder aux attributs svg de l'utilisateur, tout en mettant à jour cela dans mon modèle, j'obtiens l'erreur suivante:

Impossible de se lier à 'cx' car ce n'est pas une propriété native connue
Impossible de se lier à 'cy' car ce n'est pas une propriété native connue

etc..

J'obtiens ce genre d'erreurs pour tous les attributs svg.

Ci-dessous mon code en jade:

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

Voici mon code de directive:

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

Quelqu'un peut-il me dire où je me trompe?

javascriptangulartypescriptangular2-directives
34
Sharmile Murugaraj

Afin de se lier aux attributs des éléments SVG Dans angular 2, vous devez les préfixer avec attr:

Pour votre cercle, ce sera:

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

Je ne suis pas tout à fait sûr que ce soit [attr.stroke-width] ou [attr.strokeWidth], mais essayez-le

89
PierreDuc