svg实现环形渐变进度条

一.首先上图
![](https://img-blog.csdnimg.cn/20200306170722961.gif
二.思路
环形首先我们想到的是div写的圆多层叠加，遮挡1/4，留下3/4就好，想法是好的， 但是问题来了。
1.问题一：开头结尾的带圆弧怎么体现，这样遮挡会有一刀切的感觉；
2.问题二：进度条的渐变色怎么体现，如果是圆的话，填充背景可以达到渐变的效果，但是那种渐变效果不是环形轨迹的渐变，是从左到右或者从上到下或者从里到外散发的渐变，总之达不到；
3.问题三：进度的问题，我们知道圆形360度，顺时针0开始，但是我们想要达到45度开始。虽然我们可以减去45达到效果，总之还是不够好
三.SVG
然后又想到了canvas绘制圆，由于之前做过canvas保存图片，canvas画质并不高，所以最后选择了SVG。官方文档上面有关于SVG如何使用的标签跟属性，大家自行查询使用就好。
四: 实践
最后还是上代码方便大家参考
1.APP.vue

<template>
  <div id="app">
    <component-progress
      class='upgrade-progress'
      :isAnimation='options.isAnimation'
      :isRound='options.isRound'
      :width='options.width'
      :radius='options.radius'
      :progress='options.progressPro * 0.75'
      :barColor='options.barColors'
      :duration='options.duration'
      :timeFunction='options.timeFunction'
      :backgroundColor='options.backgroundColor'
      :title='options.title'
      :number='options.number'
      >
    </component-progress>
  </div>
</template>

<script>
import ComponentProgress from './components/componentProgress'