1、elementUI环形进度条设置渐变色
第一步:正常引入elementUi环形进度条
<el-progress class="progress-two circle2" type="circle" color="#02A0DF" :stroke-width="20" :show-text="false" :width="200" :percentage="femaleElder"></el-progress>
第二步:在页面的其他不占位地方写如下svg代码,并在linearGradient 标签上写上id,内部的stop标签的stop-color为颜色,支持rgb、rgba和十六进制颜色,stop-opacity表示透明度
<svg width="100%" height="100%">
<defs>
<linearGradient id="write" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#0299E2" stop-opacity="0.8"></stop>
<stop offset="100%" style="stop-color:#02E4DC" stop-opacity="1"></stop>
</linearGradient>
</defs>
</svg>
第三步:在css中修改原本进度条的svg
.circle2 /deep/ svg>path:nth-child(2) {
stroke: url(#write);
}
2、elementUi修改环形进度条底色
.el-progress-circle__track {
stroke: #120D65;
}