Angular2 Svg Text Attribut Bindung

Question

Ich möchte ein svg dynamisch erstellen in Angular 2.

Ich habe mehrere Attribute wie x, y, Text-Anker, Schriftgröße, Schriftart-Familie hinzufügen und füllen, aber nur Die Schriftgröße funktioniert für mich. Die Füllung möchte nicht mit [] umgehen.

<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%"> 
    <svg:text 
      [attr.x]="0" 
      [attr.y]="100" 
      [attr.text-anchor]="start" 
      [attr.font-size]="29" 
      [attr.font-family]="Helvetica" 
      attr.fill="#77777"> 
       <tspan 
        x="0" 
        dy="0">Random Text</tspan> 
    </svg:text> 
</svg> 

Plunker: http://plnkr.co/edit/D0eyyW9flV92rmoh8o85

Wie kann ich auf die Attribute binden oben aufgelistet?

Answer 1

Haben Sie hardcoded Wert in string Format, sonst Angular wird in die Komponente für die Variable mit diesem Namen für die Aktualisierung der Bindung suchen. Außerdem sollten Sie fill Eigenschaftswert als #777 anstelle von #777777 angeben. Sie würden #777777 benötigt, wenn Sie Anwendung auf IE-Browser ausführen.

<svg:text 
     [attr.x]="0" 
     [attr.y]="100" 
     [attr.text-anchor]="start" 
     [attr.font-size]="29" 
     [attr.font-family]="'Helvetica'" 
     [attr.fill]="'#777'"> 
      <tspan 
       x="0" 
       dy="0">Random Text</tspan> 
</svg:text> 

Beachten Sie innerhalb [] Zeichen jedes Attribut Bindung, verpassten Sie das gleiche für attr.fill

Demo Here