Как соединить две числовые переменные на числовой оси с помощью стрелки?

Question

[Вадим Попов]

Есть две числовые переменные A и B (к примеру 0 и 7), необходимо соединить их между собой круглой стрелкой на числовой оси - вот так :

Из исходников есть только спрайт самой оси. Решение должно быть на JS, кто может помочь? как получить координаты на спрайте и как связать их круглой стрелкой? Буду рад любой помощи :)

Answer 1

[mdss]

мое решение
https://codepen.io/mdss/pen/zpZjBQ

В нем достаточно будет манипулировать шириной и левой точкой у слоя .arrow

Answer 2

[Vitaliy]

SVG.
<path> и <marker>
https://jsfiddle.net/qunhj92j/2/


Вот результат. Вот только для изменения расстояния от начала до конца нужно менять как ширину svg, так и координаты d в

Comments

[Вадим Попов]

А можно какой нибудь пример ? подходящий под мою задачу. Есть мысль изначально замерить под полную длину, затем просто уменьшать svg на определенное кол-во пикселей, в зависимости от значений переменных.

[Vitaliy]

vadimpopov94, vanseodesign.com/web-design/svg-markers
только вместо line использовать path с "С", чтобы сделать кривую