Javascript 将svg元素放置在特定的位置方向

我会把箭头（地铁）放在圆圈元素（车站）上

箭头可以有两个相反的方向，它们应该与路径方向相匹配

事实上，我把我的箭头放在电台上

我在这个层面上有一些问题：

• 箭头不在桩号位置的中心

• 我不知道如何设置箭头的方向

我可以静态地设置每个station svg元素上的数据，如果这有助于确定js代码中的方向，但我不知道要添加什么样的数据

所以我的问题是如何根据路径角度设置直角箭头，并且能够选择反向角度

let rect=document.querySelectorAll（'#stops>g'）；
rect.forEach（elm=>{
让thiscille=elm.querySelector（'circle'）；
const g=document.createElements（'http://www.w3.org/2000/svg","g",；
设cx=thiscille.getAttribute（'cx'）；
设cy=thiscille.getAttribute（'cy'）；
让text=document.createElements（'http://www.w3.org/2000/svg","文本",；
text.textContent=⯈';
文本
g、 setAttribute（'transform'，'translate（${cx}，${cy}）`）；
g、 附件（文本）；
让svg=document.getElementById（“Calque_1”）；
svg.appendChild（g）
})

.cls-1{fill:none；笔划宽度：5px；}.cls-1.cls-2{stroke:a15256；}.cls-2{fill:fff；}.cls-3{isolation:isolation；字体大小：42.79px；字体系列：ArialMT，Arial；}
线
车站1
车站2
车站3

在更改了一些注释后，OP询问：

---

你将如何使用记号笔？（代码中的marler用于在地铁仍在运行时在路径上放置箭头，但对于车站顶部的箭头，我不知道如何使用它）

这是一种方法。可以更改refX属性的值，以将其移动到需要的位置

path{marker end:url（#mid）}

.cls-1{fill:none；笔划宽度：5px；}.cls-1.cls-2{stroke:a15256；}.cls-2{fill:fff；}.cls-3{isolation:isolation；字体大小：42.79px；字体系列：ArialMT，Arial；}
线
车站1
车站2
车站3

为什么不使用标记而不是文本箭头？您的意思是使用标记将其放置在站点最后一条路径的末尾（或下一条路径的开头）通过动态添加标记属性？我的意思是，您试图使用文本，而我将使用标记，就像您在

中使用的标记一样，但您从未使用过如何使用标记？（代码中的marler用于在地铁仍在运行时在路径上放置箭头，但对于车站顶部的箭头，我不知道如何使用它）是否可以在车站圆圈顶部叠加marler，而不在车站顶部叠加路径？我应该从JS设置标记，因为它取决于车站。不是所有的站点都有一个标记。我再次更新了我的答案，告诉你可以通过在路径中添加一个类来完成。请看一看。