HTML半圆能绘制渐变色吗,vue实现svg绘制半圆渐变进度条

参考文章：半圆进度条 vue，菜鸟教程

绘制的图片样式为：

1.png

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

2.png

代码：

: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"

>

: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"

>

attributeName="stroke-dashoffset"

:dur="`${durTime}ms`"

fill="freeze"

:from="strokeDasharray"

:to="strokeDashoffset"

>

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

}

}

}