Как анимировать отрисовку svg линии из точки в точку?

Question

[motr]

Помогите разобраться, или ткните в хороший туториал по анимации svg.

Имеется svg . Задача:
Линия изначально не видна. При ховере на точку линия исходит из неё и отрисовывается до конца.


Пока получилось так codepen

Answer 1

[profesor08]

Для этого тебе понадобится morphSVG плагин, с его помощью можешь трансформироваться свою svg как хочешь. В твоем случае, чтоб линия сначала шла до низа, потом вбок.

То есть твой d будет изменяться так:
начальное состояние: d="M272.2.3"
состояние 2: d="M272.2.3l-61 93"
состояние 3: d="M272.2.3l-61 93H0"

Comments

[motr]

я знаю, как на snap.svg реализовать это, но не хотелось бы тянуть библиотеки... может знаете, как можно с помощью параметров stroke-dasharray/stroke-dashoffset реализовать?
В любом случае спасибо! попробую с morph.svg!

[profesor08]

motr, либо snap.svg, при помощи stroke никак не реализуешь. Ты не сможешь сделать пол линии пунктиром, а пол нет. Если не хочешь тянуть библиотеки, откажись от линий. Нарисуй точками, сколько тебе надо, а потом манипулируй ими, тут много js кода не понадобится.

[motr]

profesor08, пока просто игрался с кодом, получилось такое codepen. Но таким образом выходит сплошная линия. Вообщем буду дальше думать. Идея про точки отличная! Спасибо за помощь и уделённое время!