CSS转换在指定的秒数之前完成

Question

使用path创建了SVG圆，并在特定的几秒钟内用动画填充了笔画。动画在指定秒数结束之前完成。解决方法

<svg class="progress" id="value-svg" viewBox="0 0 115 115" data-value="66">

    <path class="bg" 
      d="M 107,57 A 50,50 0 0 1 56,107 50,50 0 0 1 6,57 50,50 0 0 1 56,6 50,50 0 0 1 107,57 Z" 
      style="fill:none;stroke-width:12;stroke-opacity:1" />
    <path class="meter" 
      d="M 107,57 A 50,50 0 0 1 56,107 50,50 0 0 1 6,57 50,50 0 0 1 56,6 50,50 0 0 1 107,57 Z" 
      style="fill:none;stroke-width:12;stroke-opacity:1" 
      stroke-dasharray="318" stroke-dashoffset="318" />

    <text x="50%" y="50%" id="progress-text" text-anchor="middle" dy=".3em">04:00</text>
</svg>

并从脚本中设置笔划破折号

 value[i].style.transition = value[i].style.WebkitTransition = `stroke-dashoffset ${this.waitime}s ease-in-out`;
        value[i].style.strokeDashoffset = '0';