Double binding angular 2 with SVG [closed]

Question

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

Answer 1

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.