如何将Angular组件居中定位在SVG PATH元素中央？

要实现将<exb-node-menu>固定在SVG连线（PATH元素）的中点，无论连线长度如何变化，可通过SVG原生API获取路径中点坐标，再动态设置组件的定位样式，步骤如下：

1. 完善HTML元素引用 #

给PATH元素添加模板引用变量，方便在组件类中获取操作：

<div class="relative">
  <svg data-testid="connection" #svg>
    <path 
      #path
      [ngClass]="{ 'source-connected': !!data.source, 'target-connected': !!data.target }" 
      [attr.d]="path" 
    />
  </svg>
  <exb-node-menu #menu></exb-node-menu>
</div>

2. 在组件类中实现定位逻辑 #

通过SVG的getTotalLength()和getPointAtLength()方法获取路径中点坐标，再转换为页面坐标后设置菜单的绝对定位：

import { Component, ElementRef, ViewChild, OnInit, SimpleChanges, OnChanges } from '@angular/core';

@Component({
  selector: 'app-connection',
  templateUrl: './connection.component.html',
  styleUrls: ['./connection.component.css']
})
export class ConnectionComponent implements OnInit, OnChanges {
  @ViewChild('svg') svgRef!: ElementRef<SVGElement>;
  @ViewChild('menu') menuRef!: ElementRef<HTMLElement>;
  @ViewChild('path') pathRef!: ElementRef<SVGPathElement>;
  @Input() path!: string;
  @Input() data!: { source?: any; target?: any };

  ngOnInit() {
    this.positionMenuOnPathMidpoint();
  }

  ngOnChanges(changes: SimpleChanges) {
    // 当路径或节点连接状态变化时，重新计算定位
    if (changes['path'] || changes['data']) {
      setTimeout(() => this.positionMenuOnPathMidpoint());
    }
  }

  private positionMenuOnPathMidpoint() {
    const pathEl = this.pathRef.nativeElement;
    const svgEl = this.svgRef.nativeElement;
    const menuEl = this.menuRef.nativeElement;

    if (!pathEl || !svgEl || !menuEl) return;

    // 获取路径总长度
    const totalPathLength = pathEl.getTotalLength();
    // 获取路径中点的SVG内部坐标
    const midPoint = pathEl.getPointAtLength(totalPathLength / 2);

    // 将SVG内部坐标转换为页面绝对坐标
    const svgRect = svgEl.getBoundingClientRect();
    // 计算菜单最终位置：SVG偏移量 + 中点坐标，减去菜单自身半宽高实现中心对齐
    const menuWidth = menuEl.offsetWidth;
    const menuHeight = menuEl.offsetHeight;

    menuEl.style.position = 'absolute';
    menuEl.style.left = `${midPoint.x + svgRect.left - menuWidth / 2}px`;
    menuEl.style.top = `${midPoint.y + svgRect.top - menuHeight / 2}px`;
  }
}

关键说明 #

• getPointAtLength()返回的是SVG内部坐标系的坐标，需结合getBoundingClientRect()转换为页面绝对坐标，确保菜单定位不受SVG布局影响。
• 减去菜单自身半宽高，是为了让菜单的中心与路径中点完全重合，而非菜单左上角对齐中点。
• 若路径会动态更新（如节点拖动场景），需在ngOnChanges中重新调用定位方法，使用setTimeout确保DOM已完成更新再计算坐标。

内容的提问来源于stack exchange，提问作者Miguel Frias