2

I am writing an Angular 2 application, And i can't understand why Angular can not properly work with <svg>. When i try to make SVG elements active with angular, i see errors in console.

   <rect x={{rect.x}} y={{rect.y}} width={{rect.width}} height={{rect.height}} fill={{rect.fill}} stroke={{rect.stroke}} />
<path [d]="M0,0 v rect.height h rect.width v- rect.height z" />
Amine MEGDICHE
  • 43
  • 1
  • 5
  • Some actual code that demonstrates what you try to accomplish or some actual error message you get would be very helpful. You can edit your original answer instead of adding comments. Code in comments is usually hard to read. – Günter Zöchbauer Dec 29 '15 at 14:31

1 Answers1

10

This should work 

<rect [attr.x]="rect.x" [attr.y]="rect.y" [attr.width]="rect.width" [attr.height]="rect.height"
 [attr.fill]="rect.fill" [attr.stroke]="rect.stroke" />

x={{rect.x}} (equivalent to [x]="rect.x" is property binding syntax but these SVG attributes need attribute binding.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Thank for your answer but this method dosen't work in the path element for inject many variable into the d attribute like this: `` – Amine MEGDICHE Jan 04 '16 at 08:52
  • You're obviously using different code than in the your original question. Can you please edit your question and add the code that demonstrates what you try to accomplish? – Günter Zöchbauer Jan 04 '16 at 08:55
  • 2
    Remember that with [] binding, the RHS must be an valid JS expression. So you must re-write: `` like this: `` – user3636086 Jan 10 '16 at 21:18