無法以角度為外來物件設定位置 (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？
uj5u.com熱心網友回復：
我找到了決定
需要添加對 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);
uj5u.com熱心網友回復：
我建議，你的 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;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/385011.html
標籤：javascript 有角的 svg 捆绑 异物
上一篇：帶有d:路徑的Svg影片