elementUI环形进度条设置渐变色和修改底色

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; }