问题
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" />
回答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.
来源：https://stackoverflow.com/questions/34511929/double-binding-angular-2-with-svg