element plus 的 el-progress 进度条颜色渐变

想要的效果：

环形：

条形：

 

 基础效果

 

环形代码：

 <div style="width: 0px; height: 0px">  //在template里面写，记得宽高设置为0
          <svg width="100%" height="100%">
            <defs>
              <linearGradient id="write" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop
                  offset="0%"
                  style="stop-color: rgba(0, 141, 0, 1)"  //根据需求修改颜色即可
                  stop-opacity="0.8"
                ></stop>
                <stop
                  offset="100%"
                  style="stop-color: rgba(190, 217, 0, 1)"
                  stop-opacity="1"
                ></stop>
              </linearGradient>
            </defs>
          </svg>
      </div>


//重点代码
:deep(.circle syg> path:nth-child(2)){    //.circle是环形el-progress取的类名 write是svg的id
  stroke:url(#write)
}

条形进度条渐变

采用线性渐变即可。不显示后面的文字就在el-progress绑定：show-text ="false"

:deep(.show-progress .el-progress-bar__inner) {
  background-image: linear-gradient(
    to right,
    rgba(0, 141, 0, 1),   
    rgba(190, 217, 0, 1)
  );
}