javascript - 在特定点的线上绘制箭头

Question

我会放置具有特定位置+方向的箭头

我正在使用标记来做到这一点

export class AppComponent implements AfterViewInit,OnInit  {
  trains = [{
    progression:30,
    direction: {
      from :'Station3',
      to: 'Station2'
    }},
    {
    progression:90,
    direction: {
      from :'Station2',
      to: 'Station3'
    }
  }]

  ngAfterViewInit() {
    this.trains.map(elm=> {
    let path= document.getElementById('path9');
    let pt = path.getPointAtLength(elm.progression);
    let marker= document.getElementById("mid");
    marker.setAttribute('refX','0');
    path.setAttribute('marker-end', 'url(#mid)');
    let svg =document.getElementById('Calque_1');
    console.log(svg)
    })
  }
}

实际上没有显示标记，我不明白为什么？我正在设置marker-end路径，因此它应该打印在屏幕上。

这是一个stackblitz 演示

标签： javascriptd3.jsdomsvg

Answer 1

您需要使用<marker>元素和orient属性。此属性定义标记相对于它所附加到的形状的方向。

更多信息在这里