javascript - 以角度设置foreignObject的位置

Question

无法以角度为 foreignObject 设置位置（x，y）

我试过这样：

<foreignObject width="65" height="50" x="{{position?.x}}" y="{{position?.y}}">
   <div class="container">works!</div>
</foreignObject>

和

<foreignObject width="65" height="50" [x]="position?.x" [y]="position?.y">
   <div class="container">works!</div>
</foreignObject>

但是绑定会出错：

无法设置只有 getter 的 [object SVGForeignObjectElement] 的属性 x

如果我这样设置位置，它会起作用：

<foreignObject width="65" height="50" x="100" y="100">
    <div class="container">works!</div>
</foreignObject>

如何将动态位置设置为foreignObject？

Answer 1

我找到了决定

需要添加对 foreignObject 的本地引用

<foreignObject width="65" height="50" #foreignFirst> <- here
   <div #container class="npz-container">works!</div>
</foreignObject>

然后在 ts 文件中需要添加 viewChild 和属性：

@ViewChild('foreignFirst') foreignFirst: ElementRef;

this.foreignFirst.nativeElement.setAttribute('x', this.position.x);
this.foreignFirst.nativeElement.setAttribute('y', this.position.y);

Answer 2

我建议，你的 ForeignObject 有 x 和 y 输入属性，你可以设置；

<foreignObject width="65" height="50" [x]="position.x" [y]="position.y">
   <div class="container">works!</div>
</foreignObject>

您可以在以下位置创建 x 对象作为 Input 属性ForeignObject.Component.ts：

private _position:any;  

@Input()
public get x(){ return position};
    
public set x(position:any){
    this._position=position;
}