设置el-progress渐变背景色

前言：前天做个修改element-ui背景色的需求，要改成渐变色，看了看官方文档也没提供这个属性，这我就头大了，查询了好多资料，才知道，修改成渐变的要修改原生的代码。

因为element-ui中的环形进度条使用的svg,想要修改背景色，需要修改svg中path的sth的stroke属性。

有两种方式：

---

方式一：

步骤：

①修改el-progress

②：添加svg覆盖原生的样式

代码：

①：

 <div class="left-speed">
//修改el-progress
                 <el-progress class="progress-two circle2" type="dashboard" :stroke-width="8" :show-text="false" :width="85" :percentage="obdSpeed"></el-progress>
                  <span class="progressNum">
                    <p>{{markInfo.obdSpeed||0}}</p>
                  </span>
                  <span class="currtentStatus">待处理</span>
//重写svg,注意下面的id="colors"
//style="stop-color:#EEC54B"设置颜色
                   <svg width="100%" height="100%">
                    <defs>
                      <linearGradient id="colors" x1="0%" y1="0%" x2="100%" y2="0%">
                        <stop offset="0%" style="stop-color:#EEC54B" stop-opacity="0.8"></stop>
                        <stop offset="100%" style="stop-color:#FA8638" stop-opacity="1"></stop>
                      </linearGradient>
                    </defs>
                  </svg>
                  </div>

②：

//覆盖样式
.circle2 svg>path:nth-child(2) {
    stroke: url(#colors);
  }

方式二：

步骤：

①：拷贝代码，在官方解析的代码中添加defs标签，id为blue

②：修改path中的stroke的值stroke="url(#blue)"。

---

具体介绍如下：

先来看下未修改环形进度条的效果和使用el-progress 解析后的代码：

解决办法：直接将解析后的代码拷贝下来，然后修改里面的stroke属性了。如下：

<!-- 直接用element-ui中的el-progress，但是不能实现渐变效果 -->
                        <!-- <el-progress type="circle" :width="136" color="#00B38A" :percentage="percentAge" :stroke-width="13" :format="()=>{return ''}"></el-progress> -->
                        <!-- 进行源码修改-->
                        <div role="progressbar" aria-valuenow="14" aria-valuemin="0" aria-valuemax="100" class="el-progress el-progress--circle">
                            <div class="el-progress-circle" style="height: 136px; width: 136px;">
                            <svg viewBox="0 0 100 100">
                                <!-- rgb(2,0,255)的也可以 -->
                                <!-- <defs>
                                <linearGradient id="blue" x1="0%" y1="0%" x2="100%" y2="0%">
                                    <stop offset="0%" style="stop-color:rgb(2,0,255);stop-opacity:1" />
                                    <stop offset="100%" style="stop-color:rgb(0,200,255);stop-opacity:1" />
                                </linearGradient>
                                </defs> -->
                                    <defs>
                                        <linearGradient id="blue" x1="0%" y1="0%" x2="100%" y2="0%">
                                            <stop offset="0%" style="stop-color:#13D59A;stop-opacity:1" />
                                            <stop offset="100%" style="stop-color:#32C5FF;stop-opacity:1" />
                                        </linearGradient>
                                    </defs>
                                <path d="
                                        M 50 50
                                        m 0 -45
                                        a 45 45 0 1 1 0 90
                                        a 45 45 0 1 1 0 -90
                                        " stroke="#e5e9f2" stroke-width="9.6" fill="none" class="el-progress-circle__track" style="stroke-dasharray: 282.743px, 282.743px; stroke-dashoffset: 0px;">
                                </path>
                                <path d="
                                        M 50 50
                                        m 0 -45
                                        a 45 45 0 1 1 0 90
                                        a 45 45 0 1 1 0 -90
                                        " stroke="url(#blue)" fill="none" stroke-linecap="round" stroke-width="9.6" class="el-progress-circle__path" style="stroke-dasharray: 39.5841px, 282.743px; stroke-dashoffset: 0px; transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;">
                                </path>
                            </svg>
                        </div>
                        <!-- 源码修改完毕 -->

修改之后效果和解析代码：