如何使用stroke-linecap =“round”删除行尾的圆圈

Question

我写了一个简单的进度条代码来演示这个问题：

点击后线条动画开始

<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" 去掉一行开头的圆圈？

注意：这个效果在sn-p这里没有观察到，但是在浏览器中清晰可见，在单独保存的文件中

Answer 1

使用 @Paul LeBeau

找到了此浏览器错误的原因

我数过周长2 * PI * 40 ~= 2 * 3.14 * 40 ~= 251.2

251.2这个值有一个小圆圈，如问题中的图片所示。

如果你使用getTotalLength() 计算，你会得到251.36264038085938

circumference ~= 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>  

结论：要避免小圆，需要将周长数到小数点后第二位

Answer 2

[不是答案；但更好的代码]

查看 cmets 中答案的链接。

为了防止（奇怪的）路径计算，我建议你将pathLength设置为100

<style>
  svg {
    background: silver;
  }
</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="100" stroke-dashoffset="100" 
        stroke-width="8" stroke="#4596AB" stroke-linecap="round" fill="none" 
        pathLength="100" d="M50 10a40 40 0 0 1 0 80a 40 40 0 0 1 0 -80">
    <animate attributeName="stroke-dashoffset" begin="svg1.click" 
             dur="40s" values="100;0;100" fill="freeze" />
  </path>
</svg>