如何在stroke-dasharray和stroke-offset circle svg上实现动画？

Question

我尝试使用笔划线制作饼图，但不起作用。 这个想法是饼图将从 0 到 50 行进行动画处理。

 #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

keyframes at-rule 不是元素的 CSS 选择器的一部分。 默认情况下，圆的路径从 3 点钟开始。 圆形路径的总长度可以使用属性 pathLength 来控制。 如果动画应该顺时针方向，我认为通过在圆上设置 transform/rotate 属性而不是使用 dasharray 偏移量更容易控制起点。

 #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>