无法将SVG与angular绑定

我正在尝试为矩形元素动态呈现x轴和y轴，同时将其放到.html页面，我遇到了类似“无法绑定到'x'，因为它不是的已知属性”：svg:rect.”（错误） "

*.html *


     <svg x="100" y="500">
      <g *ngFor="let item of _rectList" >
        <rect  x="{{item.x}}" y="{{item.y}}" height="25" width="50"></rect>
      </g>
    </svg>




*.ts*


 _rectList =[];


      this. _rectList= [
{x: 50, y: 50},
{x: 75, y: 75},
{x: 115, y: 115}
];

*.html*
*.ts*
_rectList=[]；
这是。\ rectList=[
{x:50，y:50}，
{x:75，y:75}，
{x:115，y:115}
];

尝试使用其他语法

*.html *


     <svg x="100" y="500">
      <g *ngFor="let item of _rectList" >
        <rect  x="{{item.x}}" y="{{item.y}}" height="25" width="50"></rect>
      </g>
    </svg>




*.ts*


 _rectList =[];


      this. _rectList= [
{x: 50, y: 50},
{x: 75, y: 75},
{x: 115, y: 115}
];

<rect [x]="item.x" [y]="item.y" ...></rect>

或

*.html *


     <svg x="100" y="500">
      <g *ngFor="let item of _rectList" >
        <rect  x="{{item.x}}" y="{{item.y}}" height="25" width="50"></rect>
      </g>
    </svg>




*.ts*


 _rectList =[];


      this. _rectList= [
{x: 50, y: 50},
{x: 75, y: 75},
{x: 115, y: 115}
];

非常感谢您的工作（第二个）：）