在特定点的线上绘制箭头答案

【问题标题】：Draw arrows on lines in specific point在特定点的线上绘制箭头
【发布时间】：2019-12-13 04:48:56
【问题描述】：

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

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

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 demo

【问题讨论】：

什么是svg-path-properties，为什么你认为它提供getTangentAtLength？
我认为使用切线能够计算箭头方向角度的余弦，这是一个假设

标签： javascript d3.js dom svg

【解决方案1】：

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

更多信息here

【讨论】：

您只能在顶点上放置标记，而不能在曲线上的任意点上。
正如@RobertLongson 提到的那样，如果我没记错的话，你只能在开始、结束、中间和线改变方向时绘制箭头，在我的情况下，我应该在特定位置绘制箭头。