Многие, видимо из-за примеров Криса Койера на css-tricks ставят stroke-dasharray="1000"
Когда это срабатывает, а когда и нет. Дело в том, что надо точно вычислять длину анимированной линии.
Например для круга с радиусом 100px
длина окружности будет - 2*3.14*100= 628px
Вот это расчетное значение и надо подставлять в stroke-dasharray
и stroke-dashoffset
.
Решение SVG
Анимация начинается при наведении курсора
<svg id="svg2" width="400" height="400" viewBox="0 0 400 400">
<circle id="back" cx="120" cy="120" r="100" fill="none" stroke="#d5d5d5" stroke-width="5"/>
<circle transform="rotate(-90 120 120)" id="shape" cx="120" cy="120" r="100" stroke-width="5" stroke-dasharray='628' stroke-dashoffset='628' stroke="red" fill="none">
<animate attributeName="stroke-dashoffset" from="628" to="0" dur="4s" begin="svg2.mouseover" restart="whenNotActive" />
</circle>
</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;
}
}
<svg id="svg2" width="400" height="400" viewBox="0 0 400 400">
<circle id="back" cx="120" cy="120" r="100" />
<circle id="shape" transform="rotate(-90 120 120)" cx="120" cy="120" r="100" />
</svg>
Половина окружности
Повторю принцип рисования линии с нуля до полной длины: при уменьшении stroke-dashoffset
от максимального значения (628) до нуля, линия будет рисоваться от нуля до полной длины. Но нам надо закрасить только половину окружности, поэтому будем уменьшать stroke-dashoffset
от 628px
до 314px
<style>
#shape {
stroke-dashoffset:314;
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: 314;
}
}
</style>
<svg id="svg2" width="400" height="400" viewBox="0 0 400 400">
<circle id="shape" transform="rotate(-90 120 120)" cx="120" cy="120" r="100" />
</svg>