Плавная прорисовка svg?

#javascript #html #css #css3 #svg

Хочу сделать плавную прорисовку svg при загрузке страницы, но проблема в том, что
круги разные (на скриншотах показано, что нужна разная длина линии), не знаю какое-свойство
нужно анимировать при загрузке страницы.  

http://prntscr.com/hgvqjf и
http://prntscr.com/hgvqq5









    

Ответы

Ответ 1

stroke-dasharray and  stroke-dashoffset
https://codepen.io/MaffooBristol/pen/zKwoAZ


Ответ 2

Многие, видимо из-за примеров Криса Койера на css-tricks ставят stroke-dasharray="1000"
Когда это срабатывает, а когда и нет. Дело в том, что надо точно вычислять длину анимированной
линии. 
 Например для круга с радиусом 100px длина окружности будет - 2*3.14*100= 628px Вот
это расчетное значение и надо подставлять в stroke-dasharray и stroke-dashoffset.    

Решение SVG

Анимация начинается при наведении курсора






   

Решение CSS

Всё уносится в стили, в svg остаются только окружности.   



#back{
stroke:red;
stroke-width:5;
fill:none;
stroke:#d5d5d5;

}
#shape {
stroke-dashoffset:628;
stroke-dasharray:628;
stroke:red;
stroke-width:5;
fill:none;
animation: circle_stroke 4s ease-in forwards;
}
@keyframes circle_stroke {
    0% {
    stroke-dashoffset: 628;
    }
    100% {
    stroke-dashoffset: 0;
      }
    } 





Половина окружности

Повторю принцип рисования линии с нуля до полной длины: при уменьшении stroke-dashoffset
от максимального значения (628) до нуля, линия будет рисоваться от нуля до полной длины.
Но нам надо закрасить только половину окружности, поэтому будем уменьшать stroke-dashoffset
от 628px до 314px