ElementUi 自定义Progress 环形进度条颜色为渐变色

ElementUi 自定义Progress 环形进度条颜色为渐变色
—新建文件 progress-color.vue , 作为公共组件

<template>
<!-- 自定义svg , 在需要更改的地方使用即可 (目前作用于 设置 elementui 环形进度条的渐变色)  -->
  <svg width="100%" height="100%">
<!-- 渐变颜色一 通过id获取  -->
    <defs>
      <linearGradient id="blue" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:rgb(31, 197, 255); stop-opacity:1" />
        <stop offset="100%" style="stop-color:rgb(35, 231, 169);stop-opacity:1" />
      </linearGradient>
    </defs>
<!--  渐变颜色二 通过id获取 -->
    <defs>
      <linearGradient id="dismantle" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color: #ef07f7; stop-opacity:1" />
        <stop offset="100%" style="stop-color: #945fff;stop-opacity:1" />
      </linearGradient>
    </defs>
  </svg>
</template>

<script>
export default {
  name: 'progressColor'
};
</script>

—在需要使用的文件中, 引入该组件, 并使用

<template>
  <div>
      <div class="dismantle el-progress">
         <el-progress type="circle" :percentage="75" :stroke-width="15"></el-progress>
         <progressColor style="width: 0;height: 0;"></progressColor>
      </div>
  </div>
</template>
<script>
import progressColor from '../components/progress-color.vue';
export default {
  components: {
    progressColor
  }
}
</script>
<style lang="less" scoped>
.dismantle /deep/ .el-progress-circle {
   // 进度条颜色
   svg > path:nth-child(2) {
     stroke: url(#dismantle);  // 该url() 中填入的是, 对应组件中的 id 名
   }
 }
</style>

—修改后的环形进度条效果如下