Как лучше реализовать timeline?

Question

[Andrej Sharapov]

Всем привет. Делаю SVG Timeline, но в силу недостаточных знаний svg, не могу решить одну задачу.



Задача:
Нужно, чтобы при наведении на определенную группу, например четвертую, путь третьей (и далее предыдущих) группы заполнял серую линию. Пробовал реализовать поворот пути через css transform, но получается много кода и не красиво. Возможно, есть решение проще, например через js или создание svg маски. Кто что посоветует? Буду признателен за решение.

Comments

[Максим Тимофеев]

а не проще серую линию изначально сегментами сделать и просто красить их?

[Andrej Sharapov]

Максим Тимофеев, тогда придется все равно делать отдельно пути при наведении

Answer 1

[Максим Тимофеев]

а не проще серую линию изначально сегментами сделать и просто красить их?
Но можно еще попробовать сделать градиент и применять его всей линии.