Как сделать плавное появление ломанной линии с подписью в svg?

Question

[Александр]

Здравствуйте. Не нашел простого и толкового туториала по анимации svg. Подскажите как анимировать ломанную линию и подпись в svg как на картинке (по стрелочкам показано как должна идти анимация появления линии)?

Answer 1

[#rybak]

Александр: обратите внимание:
- Анимация через свойство stroke-dasharray: 1000; не работает в половине браузеров.

- Анимация с тегом animate которую предложил Drm - более кроссбраузерный вариант.

- Кстати ваша анимация очень простая, её можно сделать без svg, c помощью css3. Вот вам пример

Comments

[akogch]

Лучшее решение по вопросу. Будем использовать, спасибо.

Answer 2

[Drm]

Если я Вас правильно понял, то Вот

соответственно две линии объединяете в один path и анимируете его через увеличение свойства stroke-dashoffset

Comments

[Александр]

Спасибо за ответ. Я вроде сам решил вопрос свой вот , но осталось решить как сделать исчезновение этой линии через определенное время. вы не подскажите?

[Drm]

Александр: просто добавить settimeout и скрыть объект

$(function(){
setTimeout(function() {
$('.line-board').addClass("absolut")
}, 200);

setTimeout(function(){
$('.line-board').hide(300)
}, 1000)
});