如何创建连接圆形节点、指向目标圆边缘的带箭头SVG路径

核心逻辑非常简单：本质是求源节点中心到目标节点中心的连线，与目标圆形边缘的交点，把箭头终点设在这个交点上即可，支持目标节点任意位置移动。

已知参数 #

• 源节点中心点坐标：(sourceX, sourceY)
• 目标节点中心点坐标：(targetX, targetY)
• 目标节点的半径：targetRadius

分步计算逻辑 #

1. 计算两个节点中心的横、纵坐标差值

const dx = targetX - sourceX;
const dy = targetY - sourceY;

2. 用勾股定理计算两个中心点之间的直线距离

const distance = Math.sqrt(dx * dx + dy * dy);

边界兼容：如果两个节点中心完全重合（distance值为0），直接取目标中心作为终点即可，避免后续除以0出现计算错误。

3. 计算从源节点指向目标节点的单位方向向量，也就是连线方向上每移动1像素对应的x、y偏移比例

const dirX = dx / distance;
const dirY = dy / distance;

4. 从目标节点圆心出发，沿着朝向源节点的方向（也就是单位向量的反方向）偏移一个目标半径的长度，得到的坐标就是连线和目标圆边缘的交点，也就是箭头的最终终点

const arrowEndX = targetX - dirX * targetRadius;
const arrowEndY = targetY - dirY * targetRadius;

最终路径代码 #

替换原来直连中心的路径写法即可：

const edgePath = `M ${sourceX},${sourceY} L ${arrowEndX},${arrowEndY}`;

效果对比 #

• 直连中心的穿模效果：，箭头会扎进目标节点内部
• 指向边缘的正确效果：，箭头刚好落在目标节点轮廓边缘

优化提示 #

如果你用SVG的marker实现箭头样式，箭头图形本身会占用一定长度（比如箭头尖距离路径终点有6-10px的长度），可以把计算步骤里的targetRadius替换为targetRadius + 箭头自身长度，避免箭头尖被圆形节点遮挡。

附：参考视线与圆形交点算法核心逻辑翻译：对于从观测点出发指向圆形目标的射线，求射线与圆形边缘最近交点的计算，不需要求解复杂的二次方程，通过单位方向向量做等比缩放、从圆心反向偏移半径长度即可得到结果，上述实现就是该算法在直线连边场景下的简化版本，计算效率极高。

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