How to implement animation on stroke-dasharray and stroke-offset circle svg? - html

Question

I try to make piechart using stroke line, however isn't work. The idea is piechart will be animate from 0 to 50 line.
#circle{
stroke-dasharray: 50 100;
stroke-dashoffset: 0;
fill: none;
stroke: black;
stroke-width: 5px;
transition: 0.3s;
animation: progress 5s linear forwards;
#keyframes progress {
from {
stroke-dasharray: 0 100;
stroke-dashoffset: 0;
}
to {
stroke-dasharray: 50 100;
stroke-dashoffset: 50;
}
}
}
<svg >
<circle cx='24' cy='24' r='18' id="circle"/>
</svg>

Answer 1

The keyframes at-rule is not part of the CSS selector for the element. As default the path of the circle starts at 3 o'clock. The total length of the circle path can be controlled using the attribute pathLength. If the animation should go clockwise I think is is easier to control the starting point by setting the transform/rotate attribute on the circle instead of using the dasharray offset.
#circle {
stroke-dasharray: 0 100;
fill: none;
stroke: black;
stroke-width: 5px;
animation: progress 5s linear forwards;
}
#keyframes progress {
from {
stroke-dasharray: 0 100;
}
to {
stroke-dasharray: 100 100;
}
}
<svg>
<circle cx='24' cy='24' r='18' id="circle"
pathLength="100" transform="rotate(-90 24 24)"/>
</svg>