Question

这是我的JSfiddle 我试图在进度条的末尾创建一个带有常量对象的SVG Arc进度条。 当我使用JavaScript设置动画时，常量对象在达到100％时会转到另一边。否则它工作得很好。我还发现在使用Safari时，对于常量对象，stroke-dasharray中有1个像素差异。

我的问题和疑虑

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

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

将关键帧 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>

Answer 2

1）如果浏览器能够canvas，那么它也很可能也可以svg。但是SVG，还需要检查具体的功能，所以很难在这里给出一般的»true | false«，因为有些东西可能有效，而有些则没有。

3）SVG生活在他们自己的»display scope«中，如果你不依赖于用户输入，它的行为就像一个简单的<img >。否则你需要变换坐标。

2）~~一个人可能需要一些js，如果你想显示一些“真正的”进展（例如XHR），你还是需要JS ......~~ 只需要animation stop|non-repetitive ...

具有恒定stroke-dasharray对象的SVG Arc Progress bar

2 个答案: