svg pathText没有垂直居中

Question

我会使用textpath在特定位置的路径上拖动箭头。

我能够定义偏移量以将其放置在特定位置，但是箭头会移动并且不在路径上居中。

我会像示例here

那样绘制它们

export class AppComponent implements AfterViewInit,OnInit  {
  trains = [{
    progression:30,
    path:'#path7',
    direction: {
      from :'Station3',
      to: 'Station2'
    }},
    {
    progression:90,
    path:"#path8",
    direction: {
      from :'Station2',
      to: 'Station3'
    }
  }]
 getPath 
   ngOnInit() {

  }
  ngAfterViewInit() {
    let text = document.createElementNS('http://www.w3.org/2000/svg', 'text');

    this.trains.map(elm=> {
    let textPath = document.createElementNS('http://www.w3.org/2000/svg', 'textPath');
    let trains = document.getElementById('paths');

    textPath.setAttributeNS(
      'http://www.w3.org/1999/xlink',
      'xlink:href',
      elm.path
    );
    var ringdatenode = document.createTextNode('➤');
    textPath.appendChild(ringdatenode);
    textPath.setAttribute('startOffset', elm.progression + '%');
    textPath.setAttribute('text-anchor', 'middle');
    text.appendChild(textPath);
    trains.appendChild(text);
    })
  }

这是一个demo