Как убрать окружность на конце линии при значении атрибута stroke-linecap="round "

Question

Я написал простой пример прогресс-бара, чтобы продемонстрировать проблему:

Ниже на изображении маленький кружок на конце линии перед началом анимации:

Анимация начинается после клика по холсту SVG:

<style>
body{text-align:center;font-family:sans-serif;background:silver;}
svg{width:30%;}
</style>

<svg id="svg1"  viewBox="0 0 100 100">
   <circle cx="50" cy="50" r="40" fill="transparent" stroke="#fff" stroke-width="8"/>
  <path id="progress" stroke-dasharray="251.2" stroke-dashoffset="251.2" stroke-width="8" stroke="#4596AB" stroke-linecap="round" fill="none"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80"> 
    <animate attributeName="stroke-dashoffset" begin="svg1.click" dur="4s" values="251.2;0;251.2" fill="freeze" />     
  </path>
</svg>

Когда я назначаю атрибут stroke-linecap = "round", в начале строки появляется круг. В этом случае линия имеет нулевую длину.

С другими значениями, например, stroke-linecap = "butt", этого эффекта не будет.

Как удалить кружок в начале строки с помощью stroke-linecap = "round"?

Примечание: Этот эффект не наблюдается здесь во фрагменте, но отчетливо виден в браузере в отдельно сохраненном файле. Как показано на рисунке выше.

Answer 1

Причина этой ошибки браузера была обнаружена с помощью @Paul LeBeau

Я посчитал длину окружности в вопросе 2 * PI * 40 ~= 2 * 3,14 * 40 ~= 251,2

При этом значении 251,2 есть маленький кружок, как показано на картинке в вопросе.

Если вы рассчитываете с помощью getTotalLength(), вы получаете 251.36264038085938
При этом значении длины окружности ~= 251,36 маленького кружка нет

<style>
body{text-align:center;font-family:sans-serif;background:silver;}
svg{width:30%;}
</style>

<svg id="svg1"  viewBox="0 0 100 100">
   <circle cx="50" cy="50" r="40" fill="transparent" stroke="#fff" stroke-width="8"/>
  <path id="progress" stroke-dasharray="251.36" stroke-dashoffset="251.36" stroke-width="8" stroke="#4596AB" stroke-linecap="round" fill="none"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80"> 
    <animate attributeName="stroke-dashoffset" begin="svg1.click" dur="4s" values="251.36;0;251.36" fill="freeze" />       
  </path>
</svg>
<script>
 console.log(progress.getTotalLength());
 </script>

Вывод: чтобы не было маленького кружка, нужно считать длину окружности до второго знака после запятой.

БЛОГ НА HUSL

Как убрать окружность на конце линии при значении атрибута stroke-linecap="round "

Ответы (1 шт):