Итак, у меня есть базовый тег c <line />:
<line
x1="20"
y1="20"
x2="40"
y2="40"
stroke="blue"
fill="blue"
/>
от (20,20) до (40,40)
И я хочу поместить стрелку в середину та линия, которая указывает на (x2,y2),
Так что я нашел хороший многоугольник со стрелкой на целых rnet:
<polygon
points="
2,7
0,0
11,7
0,14"
stroke="red"
fill="red"
/>
и для того, чтобы вставить в середину, я просто взял midX и midY, поэтому многоугольник выглядел так:
и он работает хорошо, единственное, что нужно сделать, это повернуть стрелку в направлении (x2, y2), добавив атрибут transform к Polygon.
Дело в том, что я хочу сделать это проще для меня, вместо того, чтобы каждый раз вычислять угол, я нашел здесь хорошие ссылки на stackoverflow:
Как разместить треугольники со стрелками на линиях SVG?
И есть решение с использованием SVG <marker> element , и я подумал, что это может соответствовать моей проблеме, но я просто не знаю, как .
Заранее спасибо!