SVG Arc Progress bar с постоянным штрих-черточным объектом

Question

Вот мой JSfiddle Я пытаюсь создать индикатор выполнения SVG Arc с постоянным объектом в конце индикатора выполнения. Когда я анимирую это с помощью JavaScript, постоянный объект переходит на другую сторону, когда достигает 100% .В противном случае это работает отлично.Также я нашел разницу в 1 пиксель в штрих-штрихе для постоянного объекта при использовании Safari.

Мои вопросы и проблемы

1) Мне действительно нравится качество объекта SVG, но оно хорошо для кросс-браузерного рендеринга, как Canvas?(Canvas vs SVG Performance и поддержка браузера)

2) Как предотвратить постоянный переход объекта на другую сторону, когда он достигнет 100%?

3) Как сделать его отзывчивым?

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 100 100">
      <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
           <stop offset="0%" stop-color="#56c4fb" />
           <stop offset="100%" stop-color="#0baeff" />
         </linearGradient>


        <path class="grey" d="M30,90 A40,40 0 1,1 80,90" style="fill:none;"/>
        <path id="purple" class="purple" d="M30,90 A40,40 0 1,1 80,90" style="fill:none; transition: .3s;"/>
        <path id="white" class="white" d="M30,90 A40,40 0 1,1 80,90" style="fill:none; transition: .3s;"/>
 </svg>  

CSS

        svg {
    height: 90vh;
    margin: auto;
    display: block;
    }

    path {
    stroke-linecap: round;
    stroke-width: 6;
    }

    path.grey {
    stroke: #e7e7e8;

    }

    path.purple {
    stroke: url(#gradient);
    stroke-dasharray: 198;
    stroke-dashoffset: 198;
    animation: dash 5s linear forwards;
   }
    path.white {
      stroke: #ffffff;
      stroke-dasharray: 0px, 198px;
      stroke-dashoffset: 198;
      stroke-width: 3.5px;
      animation: dash 5s linear forwards;

    }
    @keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

Answer 1

1) если браузер может сделать canvas , также очень вероятно, что он может также сделать svg .НО SVG, специфические функции также должны быть проверены, поэтому сложно дать общее «true | false» здесь, так как некоторые вещи могут работать, а другие нет.

3) жизнь SVG в ихсобственный »область видимости« , если вы не зависите от пользовательского ввода, он ведет себя как простой <img >.В противном случае вам нужно будет преобразовать координаты.

2) что вам могут понадобиться несколько js, если вы хотите отобразить некоторый «реальный» прогресс (например, XHR), вам все равно понадобится JS… Просто сделайте остановку анимации | неповторяющейся …

Answer 2

Изменение свойства ключевых кадров stroke-dashoffset на 1 вместо 0, кажется, решает проблему.Я также очистил ваш синтаксис SVG от ненужного кода, и теперь он также адаптивен (это означает, что он регулирует высоту SVG в соответствии с родительским объектом.

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

svg {
  height: 90vh;
  margin: auto;
  display: block;
}

path {
  stroke-linecap: round;
  stroke-width: 6;
}

path.grey {
  stroke: #e7e7e8;
}

path.purple {
  stroke: url(#gradient);
  stroke-dasharray: 198;
  stroke-dashoffset: 198;
  animation: dash 3s ease-out forwards;
}

path.white {
  stroke: #ffffff;
  stroke-dasharray: 0px, 198px;
  stroke-dashoffset: 198;
  stroke-width: 3.5px;
  animation: dash 3s ease-out forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 1; /* <---- changed to "1" from "0"  */
  }
}

<svg viewbox="0 0 100 100">
      <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%">
           <stop offset="0%" stop-color="#56c4fb" />
           <stop offset="100%" stop-color="#0baeff" />
       </linearGradient>
       <path class="grey" d="M30,90 A40,40 0 1,1 80,90" fill='none' />
       <path id="purple" fill='none' class="purple" d="M30,90 A40,40 0 1,1 80,90" />
       <path id="white" fill='none' class="white" d="M30,90 A40,40 0 1,1 80,90" />
 </svg>