Блог

создал круг SVG, используя path, заполнил обводку анимацией для определенных секунд. анимация, завершенная до истечения указанных секунд, завершается. как решить

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

и установите stroke-dashoffset из скрипта

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