具有恒定笔划-dasharray 对象的 SVG Arc 进度条 [英] SVG Arc Progress bar with constant stroke-dasharray object

问题描述

这是我的 JSfiddle我正在尝试使用进度条末尾的常量对象制作 SVG Arc 进度条.当我使用 JavaScript 设置动画时，常量对象会在达到 100% 时移动到另一侧.否则它工作得很好.此外，我在使用 Safari 时发现常量对象的 stroke-dasharray 有 1 个像素差异.

Here is my JSfiddle I am trying to make an SVG Arc progress bar with a constant object at the end of the progress bar. When i animate this using JavaScript the constant object is going to the other side when it reach 100%. Otherwise it is working perfectly. Also i found 1 Pixel difference in stroke-dasharray for constant object when using Safari.

我的问题和疑虑

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

1) I really like the quality of the SVG object but it is good for cross browser rendering like Canvas? (Canvas vs SVG Performance and Browser support)

2) 如何防止常量对象在达到 100% 时跑到另一边?

2) How to prevent constant object is going to the other side when it reach 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;
  }
}

推荐答案

将 keyframes stroke-dashoffset 属性更改为 1 而不是 0 似乎解决了这个问题.我还清理了您不需要代码的 SVG 语法，现在它也具有响应性(意味着它会根据父对象调整 SVG 的高度.

Changing the keyframes stroke-dashoffset property to 1 instead of 0 seems to solve the issue. I've also cleaned up your SVG syntax of unneeded code and now it's also responsive (meaning it adjusts the height of the SVG according to the parent object.

关于您的第一个问题，SVG 是一种可行的方法，它对于像这样的小部件非常受欢迎，比 CANVAS 更受欢迎，仅仅是因为它更易于使用.性能方面的 SVG 完全没问题.

Regarding your first question, SVG is the way to go, and it is extremely popular for widgets such as this one, much more popular than CANVAS, simply because it is easier to work with. Performance-wise SVG is totally fine.

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>

这篇关于具有恒定笔划-dasharray 对象的 SVG Arc 进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！