具有恒定笔画虚线数组对象的 SVG 弧形进度条

Question

这是我的JSfiddle 我试图制作一个 SVG Arc 进度条，在进度条的末尾有一个常量对象。当我使用 JavaScript 对其进行动画处理时，常量对象在达到 100% 时会转到另一侧。否则它工作得很好。另外，当使用 Safari 时，我发现常量对象的中风破折号数组有 1 像素差异。

我的问题和疑虑

1) 我真的很喜欢 SVG 对象的质量，但它对于像 Canvas 这样的跨浏览器渲染有好处吗？（Canvas 与 SVG 性能和浏览器支持）

2）如何防止恒定物体在达到100%时跑到另一边？

3）如何使其响应式？

超文本标记语言

<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

将关键帧 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 .5s cubic-bezier(.7,0,.3,1) forwards;
}

path.white {
  stroke: #ffffff;
  stroke-dasharray: 0px, 198px;
  stroke-dashoffset: 198;
  stroke-width: 3.5px;
  animation: dash 3s .5s cubic-bezier(.7,0,.3,1) 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>