vue实现svg绘制半圆渐变进度条

参考文章：半圆进度条 vue，菜鸟教程
绘制的图片样式为：

1.png

在此基础上将颜色改为渐变：

2.png

代码：

<template>
  <div>
    <svg :viewBox="`0 0 ${2*radius + srtokeWidth} ${radius + srtokeWidth}`">
      <defs>
        <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#80EDFF"/>
          <stop offset="100%" stop-color="#4A7DFF"/>
        </linearGradient>
      </defs>
      <path
        :d="`M ${srtokeWidth/2} ${radius + srtokeWidth/2} a ${radius} ${radius} 0 1 1 ${radius * 2} 0`"
        :stroke-width="srtokeWidth"
        :stroke="emptyColor"
        fill="none"
        stroke-linecap="round"
      ></path>
      <path
        :d="`M ${ srtokeWidth/2} ${radius + srtokeWidth/2} a ${radius} ${radius} 0 1 1 ${radius * 2} 0`"
        :stroke-width="srtokeWidth"
        stroke="url(#linear)"
        fill="none"
        stroke-linecap="round"
        :stroke-dasharray="strokeDasharray"
        :stroke-dashoffset="strokeDashoffset"
      >
        <animate
          attributeName="stroke-dashoffset"
          :dur="`${durTime}ms`"
          fill="freeze"
          :from="strokeDasharray"
          :to="strokeDashoffset"
        ></animate>
      </path>
    </svg>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        defaultDurTime: 1000, //进度条完结时间
        defaultEmptyColor: '#ECF2FF', //默认底色
        defaultNegativeColor: '#FF4456',
//        defaultPositiveColor: '#56D5E4', //进行时底色
        defaultSrtokeWidth: 10, //进度线宽度
        defaultRadius: 50
      }
    },
    props: ['options', 'value'],
    computed: {
      durTime () {
        return this.options
          ? this.options.durTime || this.defaultDurTime
          : this.defaultDurTime
      },
      radius () {
        return this.options
          ? this.options.radius || this.defaultRadius
          : this.defaultRadius
      },
      emptyColor () {
        return this.options
          ? this.options.emptyColor || this.defaultEmptyColor
          : this.defaultEmptyColor
      },
      srtokeWidth () {
        return this.options
          ? this.options.srtokeWidth || this.defaultSrtokeWidth
          : this.defaultSrtokeWidth
      },
//      valueColor () {
//        if (this.value < 0) {
//          return this.options
//            ? this.options.negativeColor || this.defaultNegativeColor
//            : this.defaultNegativeColor
//        } else {
//          return this.options
//            ? this.options.positiveColor || this.defaultPositiveColor
//            : this.defaultPositiveColor
//        }
//      },
      strokeDasharray () {
        return 3.1415926 * this.radius
      },
      strokeDashoffset () {
        return this.strokeDasharray - this.strokeDasharray * this.value
      }
    }
  }
</script>