无法使用角度绑定 SVG

Question

I am trying to render the x and y-axis dynamically for the rectangle element while getting it to the .html page i am facing error like "Can't bind to 'x' since it isn't a known property of ':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}
];

Answer 1

Try using other syntax

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

or

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