Draw arrows on lines in specific point

Question

I would place arrows with a specific position + directions

I'm using markers to do that

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)
    })
  }
}

Actually no marker is shown , i don't understand why ? I'm setting marker-end to the path so it should be printed on screen.

Here's a stackblitz demo

What is `svg-path-properties` and why do you think it provides getTangentAtLength? — Robert Longson, Aug 05 '19 at 17:36
I think using tangent to be able to calculate the cosinus of the angle of the arrow's orientation, it's a supposition — infodev, Aug 05 '19 at 20:54

score -2 · Answer 1 · answered Aug 05 '19 at 18:38

-2

You need to use <marker> element and orient attribute. This attribute defines the orientation of the marker relative to the shape it is attached to.

More information here

answered Aug 05 '19 at 18:38

Ihor Yanovchyk

768
6
13

You can only put markers on vertices, not at arbitrary points on a curve. – Robert Longson Aug 05 '19 at 19:03
as @RobertLongson mentioned it, If I'm not mistaken, you can only draw arrows on start, end, middle and when line changes direction , in my case I should draw arrows on specific positions. – infodev Aug 05 '19 at 21:02

Draw arrows on lines in specific point

1 Answers1