element 环形进度条设置颜色渐变

Question

elementUI的环形进度条如何设置环的颜色渐变

设置为下面这种

Answer 1

element的环形图使用的是svg,如果想实现渐变，应该更改svg的path的stroke属性;

实现过程：
1.在页面其他地方新建一个线性渐变的svg(id为blue);

    <svg width="100%" height="100%">
      <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>
    </svg>

2.使用js或者css来修改element的svg的第二个path的stroke 为url(#blue)就好了。

下面是环形图的代码：

    <div class="el-progress-circle" style="height: 126px; width: 126px;">
    <svg viewBox="0 0 100 100">
        <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>
            <stop offset="100%" style="stop-color:rgb(0, 200, 255);
      stop-opacity:1"></stop>
          </linearGradient>
        </defs>
        <path d="
        M 50 50
        m 0 -47
        a 47 47 0 1 1 0 94
        a 47 47 0 1 1 0 -94
        " stroke="#e5e9f2" stroke-width="4.8" fill="none" class="el-progress-circle__track"
          style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px;"></path>
        <path d="
        M 50 50
        m 0 -47
        a 47 47 0 1 1 0 94
        a 47 47 0 1 1 0 -94
        " stroke="url(#blue)" fill="none" stroke-linecap="round" stroke-width="4.8" class="el-progress-circle__path"
          style="stroke-dasharray: 185.717px, 295.31px;stroke-dashoffset: 0px;transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;/* stroke: rgb(1, 187, 261); */">
        </path>
      </svg>
    </div>

效果图：