双重角度2与SVG [英] Double binding angular 2 with SVG

问题描述

我正在写一个Angular 2应用程序，我不明白为什么Angular无法正常使用< svg>。当我尝试使SVG元素激活角度，我看到控制台中的错误。

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

解决方案

这应该工作

 < rect [attr.x] =rect.x[attr.y] =rect.y[attr.width] =rect。宽度[attr.height] =rect.height
 [attr.fill] =rect.fill[attr.stroke] =rect.stroke/> 
  

x = {{rect.x}} （相当于 [x] =rect.x是属性绑定语法，但这些SVG属性需要属性绑定。

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

解决方案

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.

这篇关于双重角度2与SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！