如何在笔画线和笔画偏移圆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

关键帧at-规则不是元素的CSS选择器的一部分.默认情况下，圆圈的路径从3点钟开始。可以使用属性pathLength来控制圆路径的总长度。如果动画应该顺时针进行，我认为通过在圆上设置转换/旋转属性来控制起点更容易，而不是使用达沙雷偏移量。

​

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

​