如何在中风 - 戴式和中风挡群圆圈上实现动画？

Question

我尝试使用中风线制作Piechart，但是行不通。这个想法是Piechart将是从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

关键帧处于规则不是该元素的CSS选择器的一部分。默认情况下，圆的路径从3点开始。可以使用属性路径长度控制圆路径的总长度。如果动画应顺时针顺时针进行，我认为通过在圆上设置转换/旋转属性而不是使用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>